Attaching Event Listeners in JavaScript
Everybody knows how different is to attach event listeners under different browsers. Under IE is attachEvent(), while under FF is addEventListener()! The compatibility can be checked in the PPK site www.quirksmode.org where the author describes in detail where a given event listener can be registered and how it should be done.
Event Bubbling
Important part of the events in JavaScript is the so called “event bubbling“. You know, when you click on a given DOM element when bubbling is on the DOM elements containing this specific DOM element receive the event. So when I move the mouse over a DIV element the event mousemove is received in every element containing that DIV up to the window object.
In Mozilla it should look like this:
element.addEventListener('mousemove', callback, false);
Where the third parameter is describing the use of event bubbling, when setup to false, and if it’s set to true the other type of event handling is used, the so called capturing, which in breaf is the oposite of bubbling and the event is propagated from the top to bottom. The problem under different browsers is that sometimes this “mousemove” is not enough. In the case of mousewheel there are several combinations.
In IE:
document.attachEvent('onmousewheel', function(e){
if (!e) var e = window.event;
e.returnValue = false;
e.cancelBubble = true;
return false;
}, false);
In Safari:
document.addEventListener('mousewheel', function(e){
e.stopPropagation();
e.preventDefault();
e.cancelBubble = false;
return false;
}, false);
In Opera:
document.attachEvent('mousewheel', function(e){
if (!e) var e = window.event;
e.returnValue = false;
e.cancelBubble = true;
return false;
}, false);
In Firefox:
document.addEventListener('DOMMouseScroll', function(e){
e.stopPropagation();
e.preventDefault();
e.cancelBubble = false;
return false;
}, false);
Note the differences between all the browsers.
You really should set examples in jQuery as well.
Well this code can simply be wrapped into a jQuery shell, which was my case.
greetings,
stoimen
Thank you. So how do we get the wheel value?
Thanks for your nice article, it helped a lot.
In addition, for the people who wants to check if function defined they can use typeof, ie:
@Akkara,
e object will give you the scroll x,y nodes. Comment out a console.log from the code below for your browser spesific function, you’ll see what your browser will gives you. On chrome e.offsetX, e.offsetY, e.pageX, e.pageY, e.screenX, e.screenY etc..
It is really nice, I have adjusted the script since it was not working in IE, furthermore I combined it with this script:
http://solidlystated.com/scripting/javascript-disable-mouse-wheel/
Now this is my code, but it still won’t work for IE, have I done something wrong?
/* IE7, IE8 */
if(document.attachEvent){
document.attachEvent(‘onmousewheel’, stopWheel, false);
}
/* Chrome, Safari, Firefox */
else if(document.addEventListener){
document.addEventListener(‘DOMMouseScroll’, stopWheel, false);
}
function stopWheel(e){
/* IE7, IE8, Chrome, Safari */
if(!e) {
var e = window.event;
}
/* Chrome, Safari, Firefox */
if(e.preventDefault) {
e.stopPropagation();
e.preventDefault();
e.cancelBubble = false;
}
/* IE7, IE8 */
e.returnValue = false;
e.cancelBubble = true;
return false;
}
OPERA is wrong.. it does not work ..you have entered IExploer script again.