JavaScript Mouse Wheel Event Example

Roller event Compatibility Differences Some eclectic, not the previous ie8-and other factions, but the Firefox and other pies.

browsers, including IE6, use OnMouseWheel, and Firefox browsers use Dommousescroll alone. By oneself test, even if now Firefox 19, also do not know OnMouseWheel.

The code is as follows	Copy Code
Non IE Document.body.onmousewheel = function (event) { Event = Event | | window.event; Console.dir (event); }; Firefox Document.body.addEventListener ("Dommousescroll", function (event) { Console.dir (event); });

IE and other mainstream browsers can use the traditional event-binding model. But do not use IE proprietary attachevent method, other mainstream browsers do not recognize this method of Microsoft. Now let's test it.

-120

The code is as follows

Copy Code

<script type= "Text/javascript" > <! [cdata[ var mousewheel = document.getElementById (' MouseWheel '); if (Mousewheel.addeventlistener) { Mousewheel.addeventlistener (' Dommousescroll ', function (event) { Event.target.innerHTML = Event.detail; Event.stoppropagation (); Event.preventdefault (); }, False); } Mousewheel.onmousewheel = function (event) { Event = Event | | window.event; mousewheel.innerhtml = Event.wheeldelta; Event.returnvalue = false; } ]]> </script>

The following conclusions are obtained after the test.
Firefox
Mouse wheel Scroll Up is-3, scroll down is 3

Ie
Mouse wheel Scroll Up is 120, scroll down is-120

Safari
Mouse wheel Scroll up is 360, scroll down is-360

Opera
Mouse wheel Scroll Up is 120, scroll down is-120

Chrome
Mouse wheel Scroll Up is 120, scroll down is-120