Ah magic numbers don't you love them :) The following link points to a blog entry that goes into detail about normalising the mouse wheel event so that it can be used cross browser without going insane.
http://blog.paranoidferret.com/index.php/2007/10/31/javascript-tutorial-the-scroll-wheel/ Most of what I did just stems from that but has been made to be friendly with MochiKit. On Jun 3, 5:39 pm, "Per Cederberg" <[EMAIL PROTECTED]> wrote: > Thanks! I'll apply this patch shortly to the svn repository. It will > be committed in parts, separating the actual mouse wheel stuff from > code fixing other issues in signal(), etc. > > One question though. I see that the Mozilla "event.details" value is > considered equivalent to "-event.wheelDelta / 40". But where does this > magic number 40 come from? I see from MSDN that wheelDelta is always > returned in multiples of 120. Is this just assuming that a wheel event > always scrolls 3 lines? > > Cheers, > > /Per > > On Tue, Jun 3, 2008 at 8:55 AM, [EMAIL PROTECTED] > > <[EMAIL PROTECTED]> wrote: > > > Below is a patch for adding mousewheel handling to mochikit. It has > > been made against SVN 1383. > > > It contains changes to Signal.js and some demo pages that end up in > > examples. > > > My main need for this is to try and suppress the scrolling of a page > > after the contents of a div have been fully scrolled. The example > > manages to do this for FF but fails in IE if you scroll quickly > > enough. If anybody has any ideas on how to make this work reliably in > > IE I'd love to hear about it. > > > This patch makes no attempt at making all of the signal handling late > > bound (as mentioned in by Per in a previous message), it just > > refactors Signal.connect a bit to create custom handlers for mouse > > wheel events and for the existing mouseenter/leave stuff. > > > - Sim > > > diff -r 3354b0497e7a MochiKit/Signal.js > > --- a/MochiKit/Signal.js Fri May 30 12:43:36 2008 +1000 > > +++ b/MochiKit/Signal.js Tue Jun 03 16:45:16 2008 +1000 > > @@ -63,7 +63,7 @@ > > str += '}'; > > } > > } > > - if (this.type() == 'mouseover' || this.type() == 'mouseout' > > || > > + if (this.type() == 'mouseover' || this.type() == 'mouseout' > > || > > this.type() == 'mouseenter' || this.type() == > > 'mouseleave') { > > str += ', relatedTarget(): ' + > > repr(this.relatedTarget()); > > } > > @@ -94,6 +94,13 @@ > > /** @id MochiKit.Signal.Event.prototype.target */ > > target: function () { > > return this._event.target || this._event.srcElement; > > + }, > > + > > + wheelData: function() { > > + if (! this._wheelData) { > > + this._wheelData = this._event.detail ? this._event.detail * > > -1 : this._event.wheelDelta / 40; > > + } > > + return this._wheelData; > > }, > > > _relatedTarget: null, > > @@ -516,10 +523,10 @@ > > if (sig === 'onload' || sig === 'onunload') { > > return function (nativeEvent) { > > obj[func].apply(obj, [new E(src, nativeEvent)]); > > - > > + > > var ident = new MochiKit.Signal.Ident({ > > source: src, signal: sig, objOrFunc: obj, > > funcOrStr: func}); > > - > > + > > MochiKit.Signal._disconnect(ident); > > }; > > } else { > > @@ -531,10 +538,10 @@ > > if (sig === 'onload' || sig === 'onunload') { > > return function (nativeEvent) { > > func.apply(obj, [new E(src, nativeEvent)]); > > - > > + > > var ident = new MochiKit.Signal.Ident({ > > source: src, signal: sig, objOrFunc: func}); > > - > > + > > MochiKit.Signal._disconnect(ident); > > }; > > } else { > > @@ -576,6 +583,69 @@ > > }; > > }, > > > + _makeMouseEnterListener: function(self,src, sig, func, obj) { > > + var listener = self._mouseEnterListener(src, sig.substr(2), > > func, obj); > > + self._addEventListener(src, > > + (sig === "onmouseenter") ? > > "onmouseover" : "onmouseout", > > + listener ); > > + return listener; > > + }, > > + > > + _mouseWheelListener: function (src, sig, func, obj) { > > + var E = MochiKit.Signal.Event; > > + > > + // return a closure that smooths over the differences between > > browsers > > + return function (nativeEvent) { > > + var e = new E(src, nativeEvent); > > + e.type = function () { return sig; }; > > + > > + // let the connected function deal with it > > + if (typeof(func) == "string") { > > + return obj[func].apply(obj, [e]); > > + } else { > > + return func.apply(obj, [e]); > > + } > > + }; > > + }, > > + > > + _makeMouseWheelListener: function (self,src,sig,func,obj) { > > + var listener = self._mouseWheelListener(src, sig.substr(2), > > func, obj); > > + > > + // takes care of IE, Opera, etc > > + self._addEventListener(src, "onmousewheel", listener ); > > + > > + // Mozilla has a totally different name > > + if (src.addEventListener) { > > + src.addEventListener("DOMMouseScroll", listener, false); > > + } > > + return listener; > > + }, > > + > > + _addEventListener: function(src, sig, listener) { > > + if (src.addEventListener) { > > + src.addEventListener(sig.substr(2), listener, false); > > + } else if (src.attachEvent) { > > + src.attachEvent(sig, listener); // useCapture unsupported > > + } > > + }, > > + > > + _makeDOMListener: function(self, src, sig, func, obj) { > > + // simulated mouse event for those browsers that need it > > + if ((sig === "onmouseenter" || sig === "onmouseleave") > > + && !self._browserAlreadyHasMouseEnterAndLeave()) { > > + return self._makeMouseEnterListener(self,src,sig,func,obj); > > + } > > + // special mouse wheel handling > > + else if (sig === "onmousewheel") { > > + return self._makeMouseWheelListener(self,src,sig,func,obj); > > + } > > + > > + // default dom listener > > + var listener = self._listener(src, sig, func, obj, true); > > + self._addEventListener(src, sig, listener ); > > + return listener; > > + }, > > + > > _getDestPair: function (objOrFunc, funcOrStr) { > > var obj = null; > > var func = null; > > @@ -613,32 +683,17 @@ > > obj = src; > > } > > > - var isDOM = !!(src.addEventListener || src.attachEvent); > > - if (isDOM && (sig === "onmouseenter" || sig === > > "onmouseleave") > > - && !self._browserAlreadyHasMouseEnterAndLeave()) { > > - var listener = self._mouseEnterListener(src, > > sig.substr(2), func, obj); > > - if (sig === "onmouseenter") { > > - sig = "onmouseover"; > > - } else { > > - sig = "onmouseout"; > > - } > > - } else { > > - var listener = self._listener(src, sig, func, obj, > > isDOM); > > - } > > - > > - if (src.addEventListener) { > > - src.addEventListener(sig.substr(2), listener, false); > > - } else if (src.attachEvent) { > > - src.attachEvent(sig, listener); // useCapture unsupported > > - } > > + var isDOM = !!(sig.substr(0,2) === "on" && > > (src.addEventListener || src.attachEvent)); > > + var listener = isDOM ? self._makeDOMListener(self, src, sig, > > func, obj) : > > + self._listener(src, sig, func, obj, false); > > > var ident = new MochiKit.Signal.Ident({ > > - source: src, > > - signal: sig, > > - listener: listener, > > - isDOM: isDOM, > > - objOrFunc: objOrFunc, > > - funcOrStr: funcOrStr, > > + source: src, > > + signal: sig, > > + listener: listener, > > + isDOM: isDOM, > > + objOrFunc: objOrFunc, > > + funcOrStr: funcOrStr, > > connected: true > > }); > > self._observers.push(ident); > > diff -r 3354b0497e7a examples/mousewheel_events/index.html > > --- /dev/null Thu Jan 01 00:00:00 1970 +0000 > > +++ b/examples/mousewheel_events/index.html Tue Jun 03 16:45:16 2008 > > +1000 > > @@ -0,0 +1,85 @@ > > +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" > > + "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";> > > +<html xmlns="http://www.w3.org/1999/xhtml";> > > +<head> > > + <title>Mouse Wheel Events with MochiKit</title> > > + <link href="mousewheel_events.css" rel="stylesheet" type="text/ > > css" /> > > + <script type="text/javascript" src="../../MochiKit/MochiKit.js"></ > > script> > > + <script type="text/javascript" src="mousewheel_events.js"></ > > script> > > +</head> > > +<body> > > + <h1> > > + Mouse Wheel Events with MochiKit > > + </h1> > > + <p> > > + For a detailed description of what happens under the hood, > > check out > > + <a href="mousewheel_events.js" class="view- > > source">mousewheel_events.js</a>. > > + </p> > > + > > + <p> > > + View Source: [ > > + <a href="index.html" class="view-source">index.html</a> | > > + <a href="mousewheel_events.js" class="view- > > source">mousewheel_events.js</a> | > > + <a href="mousewheel_events.css" class="view- > > source">mousewheel_events.css</a> > > + ] > > + </p> > > + > > + <div id="show-wheeldata" class="scroll-box">Scroll In Me: <span > > id="show-wheeldata-ouput">0</span> (-3 for down, 3 for up)</div> > > + > > + <div id="scroll-page" class="scroll-box" style="height : 100px; > > overflow : scroll;"> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and then the page scrolls! <br /> > > + Scroll Me and > > ... > > read more ยป --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "MochiKit" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/mochikit?hl=en -~----------~----~----~----~------~----~------~--~---
