A scroll event is a very useful event. It is usually used when you flip pages or zoom in. However, it is relatively difficult to implement compatibility in various browsers. It is known as the most standard ff. It uses a private Implementation of dommousescroll, while other browsers using mousewheel have more or less bugs. Let's take a look at the degree of support provided by various browsers.
|
IE |
Firefox |
Safari |
Chrome |
Opera |
Window object |
False |
True |
True |
True |
True |
Document Object |
True |
True |
True |
True |
True |
Element Node |
True |
True |
True |
True |
True |
Next, let's take a look at how to dispatch wheel events in Firefox:
window. addeventlistener ("dommousescroll", function (event) {alert (event. type) Alert (event. clienty)}, false); var event = document. createevent ("mouseevent"); // in order to prove that the assignment is successful, set clienty to 90 event. initmouseevent ("dommousescroll", true, null, window, 0, 0, 0, 90, false, 0, null); window. dispatchevent
<Br/> <! Doctype HTML> <br/> <HTML lang = "ZH-ch"> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <meta content = "Ie = 8" http-equiv = "X-UA-compatible"/> <br/> <title> mousewheel event allocation by situ zhengmei </Title> </P> <p> <SCRIPT type = "text/JavaScript"> </P> <p> window. onload = function () {</P> <p> window. addeventlistener ("dommousescroll", function (event) {<br/> alert (event. type) <br/> alert (event. clienty) <br/>}, false); <br/> var event = document. createevent ("mouseevent"); <br/> // to prove that the assignment is successful, set clienty to 90. <br/> event. initmouseevent ("dommousescroll", true, null, window, 0, 0, 0, 90, false, 0, null); <br/> window. dispatchevent (Event) </P> <p >}</P> <p> </SCRIPT> <br/> <style type = "text/CSS"> </P> <p> </style> </P> <p> </pead> <br/> <body> <br/> </ptml> <br />
RunCode
We can see that although other standard browsers also support the dommousescroll event, when we scroll the mouse wheel manually, only FF responds, and two alert pops up. For other standard browsers, use mousewheel.
Window. addeventlistener ("mousewheel", function (event) {alert (event. type) Alert (event. clientx)}, false); var event = document. createevent ("mouseevent"); // to prove that the assignment is successful, set clientx to 120 event. initmouseevent ("mousewheel", true, null, window, 0, 0, 0,120, 0, false, 0, null); window. dispatchevent (Event)
<Br/> <! Doctype HTML> <br/> <HTML lang = "ZH-ch"> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <meta content = "Ie = 8" http-equiv = "X-UA-compatible"/> <br/> <title> mousewheel event allocation by situ zhengmei </Title> </P> <p> <SCRIPT type = "text/JavaScript"> <br/> window. addeventlistener ("mousewheel", function (event) {<br/> alert (event. type) <br/> alert (event. clientx) <br/>}, false); <br/> var event = document. createevent ("mouseevent"); <br/> // to prove that the assignment is successful, set clientx to 120. <br/> event. initmouseevent ("mousewheel", true, null, window, 0,120, 0, false, 0, null); <br/> window. dispatchevent (Event) </P> <p> </SCRIPT> <br/> <style type = "text/CSS"> </P> <p> </style> </P> <p> </pead> <br/> <body> <br/> </ptml> <br/>
Run code
This is effective in a standard browser other than ff. FF can only be used to assign events and cannot be manually triggered. It can be said that if the event type is not supported by the original browser, addeventlistener will ignore it.
It is much simpler for IE. It does not have to initialize the event, and you cannot set its properties because it is read-only, but can set custom properties.
Window. onload = function () {document. attachevent ("onmousewheel", function () {var E = Window. event; alert (e) Alert (E. type) Alert (E. aa)}); var event = document. createeventobject (); event. AA = "situ zhengmei" document. fireevent ("onmousewheel", event )}
<Br/> <! Doctype HTML> <br/> <HTML lang = "ZH-ch"> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <meta content = "Ie = 8" http-equiv = "X-UA-compatible"/> <br/> <title> mousewheel event allocation by situ zhengmei </Title> </P> <p> <SCRIPT type = "text/JavaScript"> <br/> window. onload = function () {<br/> document. attachevent ("onmousewheel", function () {<br/> var E = Window. event; <br/> alert (e) <br/> alert (E. type) <br/> alert (E. aa) <br/>}); <br/> var event = document. createeventobject (); <br/> event. AA = "situ zhengmei" </P> <p> document. fireevent ("onmousewheel", event) <br/>}< br/> </SCRIPT> <br/> <style type = "text/CSS"> </P> <p> </style> </ p> <p> </pead> <br/> <body> <br/> </ptml> <br/>
Run code
After the event is assigned, it is bound to the event section. Although only FF is currently using dommousescroll, We will writeProgramTo detect the required event types. Finally, we need to fix its rolling attribute in the callback function:
- The attribute name of IE is detail, and the W3C is wheeldelta, which is now unified as delta.
- IE and so on are rolled up to 120, and rolled down to-120. W3C rolled up to 3 and 3, but the opera9x series was incorrect. It was consistent with IE's rolling direction, but it was fixed after 10.
- In earlier versions of safari, floating point numbers may occur in wheeldelta. We need to adjust the number on our own.
Function addevent (El, type, callback, usecapture) {If (El. dispatchevent) {// The W3C method takes precedence over El. addeventlistener (type, callback ,!! Usecapture);} else {el. attachevent ("On" + type, callback) ;}return callback; // return callback for ease of use when uninstalling} var wheel = function (OBJ, callback) {var wheeltype = "mousewheel" try {document. createevent ("mousescrollevents") wheeltype = "dommousescroll"} catch (e) {} addevent (OBJ, wheeltype, function (event) {If ("wheeldelta" in Event) {// unified as ± 120, where positive number indicates upward scrolling, negative number indicates downward scrolling var Delta = event. the scroll direction of the wheeldelta // opera 9x series is consistent with that of IE, And if (window. opera & opera. version () <10) Delta =-delta; // since the original attribute of the event object is read-only, we can only add a private attribute Delta to solve the compatibility problem event. delta = math. round (DELTA)/120; // fixed the floating point bug in Safari} else if ("detail" in event) {event. wheeldelta =-event. detail * 40 // Add more popular wheeldelta event for ff. delta = event. wheeldelta/120 // Add a Private Delta} callback. call (OBJ, event); // corrected this point of IE });}
Usage:
Wheel (document, function (e) {alert (E. Delta )});
</P> <p> <! Doctype HTML> <br/> <pead> <br/> <title> wheel event mousewheel by situ zhengmei </title> <br/> <Meta HTTP-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <br/> <style> <br/> body {<br/> padding: 10px 100px; <br/>}< br/>. slider {<br/> width: 48px; <br/> Height: 200px; <br/> padding: 5px 0px; <br/> Background: # Eee; <br/> cursor: N-resize; <br/>}< br/>. slider-slot {<br/> width: 16px; <br/> margin: 1 0px 15px; <br/> Height: 180px; <br/> Background: # Eee; <br/> border: 1px solid gray; <br/> border-color: #999 white #999; <br/> position: relative; <br/>}< br/>. slider-trigger {<br/> width: 14px; <br/> Height: 18px; <br/> Font: 1px/0 Arial; <br/> border: 1px solid gray; <br/> border-color: white #999 #999 white; <br/> Background: # CCC; <br/> position: absolute; <br/>}</P> <p> </style> <br/> <SCRIPT t Ype = "text/JavaScript" >/// <! [CDATA [<br/> window. onload = function () {<br/> function log (s) {<br/> window. console & console. log (s); <br/>}< br/> var get = function (I) {<br/> return document. getelementbyid (I); <br/>}< br/> function addevent (El, type, callback, usecapture) {<br/> If (El. dispatchevent) {// W3C mode is preferred <br/> el. addeventlistener (type, callback ,!! Usecapture); <br/>}else {<br/> el. attachevent ("On" + type, callback); <br/>}< br/> return callback; // return callback for ease of uninstallation <br/>}< br/> var wheel = function (OBJ, callback) {<br/> var wheeltype = "mousewheel" <br/> try {<br/> document. createevent ("mousescrollevents") <br/> wheeltype = "dommousescroll" <br/>} catch (e) {}< br/> addevent (OBJ, wheeltype, function (Event) {<br/> If ("wheeldelta" in event) {// unified to ± 120, where positive numbers indicate Scrolling up, negative number indicates scrolling down <br/> var Delta = event. wheeldelta <br/> // The scroll direction of the opera 9x series is the same as that of IE, and is fixed after 10. <br/> If (window. opera & opera. version () <10) <br/> Delta =-delta; <br/> // because the original attribute of the event object is read-only, we can only add a private property Delta to solve the compatibility problem <br/> event. delta = math. round (DELTA)/120; // fixed the floating point bug of safari <br/>} else if ("detail" in event) {<br/> event. wheeldelta =-event. detail * 40 // Add more popular wheeldelta for FF <br/> event. delta = event. wheeldelta/120 // Add a Private Delta <br/>}< br/> callback. call (OBJ, event); // modify this of IE to <br/>}); <br/>}< br/> function preventdefault (E) {<br/> If (E. preventdefault) <br/> E. preventdefault (); <br/> E. returnvalue = false; <br/>}</P> <p> wheel (get ("Number"), function (e) {<br/> This. value = (number (this. value) | 0) + E. delta /// 120; <br/> This. select (); <br/> preventdefault (e) <br/>}) </P> <p> wheel (get ("IMG"), function (E) {<br/> This. style. width = This. offsetwidth + E. delta + 'px '; <br/> This. style. height = This. offsetheight + E. delta + 'px '; <br/> preventdefault (e) </P> <p >}) </P> <p> function range (Num, Max, min) {<br/> return math. min (max, math. max (Num, min); <br/>}< br/> var tar = get ('slidertrigger'); <br/> wheel (get ("Slider "), function (e) {<br/> preventdefault (e) <br/> tar. style. top = range (TAR. offsettop + (-1 * E. delta * 10),) + 'px '; <br/> }) <br/>}< br/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <H2> increase/decrease in the text box </H2> <br/> <div> <input type = "text" value = "300" id = "Number"> <br/> <span> after the text box gets the focus scroll the scroll wheel </span> <br/> </div> <br/> <H2> scroll and zoom the image </H2> <br/> <div> <br/> <br/> </div> <br/> <H2> mouse scroll Control slider movement </H2> <br/> <Div id = "Slider" class = "Slider"> <br/> <Div class = "Slider-slot"> <br/> <Div id = "slidertrigger" class = "Slider-Trigger"> <br/> <strong> </strong> <br /> <strong> </strong> <br/> </div> <br/> </div> </P> <p> </body> <br/> </ptml> </P> <p>
Run code
Event Property |
Applies to event: |
Up 1 click |
Up 2 clicks |
Down 1 click |
Down 2 clicks |
E. wheeldelta Supported in non FF browsers |
Onmousewheel And in non FF Browsers |
120 |
240 |
-120 |
-240 |
E. Detail Supported in ff and Opera |
Dommousescroll And in FF (As of ff3.x) |
-1 |
-2 |
1 |
2 |
The FF official website also provides a compatibility solution:
// Creates a global "addwheellistener" method // example: addwheellistener (ELEM, function (e) {console. log (E. deltay); E. preventdefault () ;}); (function (window, document) {var prefix = "", _ addeventlistener, onwheel, support; // detect event model if (window. addeventlistener) {_ addeventlistener = "addeventlistener";} else {_ addeventlistener = "attachevent"; prefix = "on";} // detect availa Ble wheel event if (document. onmousewheel! = Undefined) {// WebKit and IE support at least "mousewheel" support = "mousewheel"} Try {// modern browsers support "Wheel" wheelevent ("Wheel "); support = "Wheel";} catch (e) {} If (! Support) {// Let's assume that remaining browsers are older Firefox support = "dommousescroll";} window. addwheellistener = function (ELEM, callback, usecapture) {_ addwheellistener (ELEM, support, callback, usecapture); // handle implements mousepixelscroll in older Firefox if (Support = "dommousescroll ") {_ addwheellistener (ELEM, "mozmousepixelscroll", callback, usecapture) ;}; function _ addwhe Ellistener (ELEM, eventname, callback, usecapture) {ELEM [_ addeventlistener] (prefix + eventname, support = "Wheel "? Callback: function (originalevent ){! Originalevent & (originalevent = Window. event); // create a normalized event object var event = {// keep a ref to the original event object originalevent: originalevent, target: originalevent.tar GET | originalevent. srcelement, type: "Wheel", deltamode: originalevent. type = "mozmousepixelscroll "? 0: 1, deltax: 0, delatz: 0, preventdefault: function () {originalevent. preventdefault? Originalevent. preventdefault (): originalevent. returnvalue = false ;}}; // calculate deltay (and deltax) according to the event if (Support = "mousewheel") {event. deltay =-1/40 * originalevent. wheeldelta; // WebKit also support wheeldeltax originalevent. wheeldeltax & (event. deltax =-1/40 * originalevent. wheeldeltax);} else {event. deltay = originalevent. detail;} // It's time to fire the callback return callback (event) ;}, usecapture | false) ;}) (window, document );