Home > Developer > JavaScript
In fact, in most browsers (IE6, IE7, IE8, Opera 10 +, Safari 5 +), the "mousewheel" event is provided. But Firefox 3.5 + does not support this event, but fortunately Firefox 3.5 + provides another equivalent event: "DOMMouseScroll" (test case of event and event properties ).
<! DOCTYPE html> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <title> Mousewheel Event in JavaScript </title> <style> body {padding: 5px 10px ;}. box {width: 300px; height: 150px; padding: 10px; border: 1px solid #999; background: #999; margin-bottom: 20px ;}. result strong {color: # f00 ;}</style> </pead> <body> Mousewheel Event in JavaScript <ol> <li> IE6, IE7, IE8, Opera 10 +, safari 5 + support mousewheel. </li> <li> Firefox 3.5 + support DOMMouseScroll. </li> <li> IE6, IE7, IE8, Opera 10 +, Safari 5 + support event. wheelDelta. </li> <li> Firefox 3.5 +, Opera 10 + support event. detail. </li> <li> The event. wheelDelta value is a multiple of 120. </li> <li> The event. detail value is a multiple of 3. </li> </ol> Mousewheel Event: mousewheel Mousewheel Event: DOMMouseScroll <p id = "J_Result" class = "result"> </p> <p> Related Articles: http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/ </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
OK. Now we know the differences between different browsers. The compatible code is as follows:
Copy codeThe Code is as follows:
Var addEvent = (function (){
If (window. addEventListener ){
Return function (el, sType, fn, capture ){
El. addEventListener (sType, fn, (capture ));
};
} Else if (window. attachEvent ){
Return function (el, sType, fn, capture ){
El. attachEvent ("on" + sType, fn );
};
} Else {
Return function (){};
}
})(),
// IsFirefox is a pseudo-code, which can be implemented by yourself
Mousewheel = isFirefox? "DOMMouseScroll": "mousewheel ";
// The object is also a pseudo code. You need to register the element of the Mousewheel event.
AddEvent (object, mousewheel, function (event ){
Event = window. event | event;
// Todo something
}, False );
Let's go back to the interaction effect to be implemented. There are other problems to be solved:
1. Is the page font zoomed in or out? ==> Is the scroll wheel scroll up or down?
2. How many times does the page font scale? ==> What is the scroll size of the mouse wheel?
Fortunately, we can get this information through some attribute values of the event:
1. the "event. wheelDelta "attribute value: returned value. If positive, the scroll wheel is scroll up. If negative, the scroll wheel is scroll down. The returned value is a multiple of 120, that is: amplitude size = returned value/120.
2. "event. detail "property value: returned value. If it is a negative value, the scroll wheel is scrolled up (with" event. ). If it is positive, the scroll wheel is scroll down. The returned values are multiples of 3, that is, the amplitude is equal to the returned value/3.
3. The "mousewheel" event is a special case in Opera 10 +, including the "event. wheelDelta" attribute and "event. detail" attribute.
Note: As mentioned above, there is an annotation in The article "The onmousewheel event of JavaScript:
Copy codeThe Code is as follows:
In Opera, "detail" returns the same value as it does in FF, so for the big O you shoshould rely on "detail" instead of "wheelDelta ", which depending on the Opera version may return a different value than in IE's.
However, the event in Opera 9 + and Opera 10 + has been tested. the wheelDelta attribute is exactly the same as that in other browsers, and no exceptions or errors are found. From the interface point of view, "event" should be preferentially used in the code. the "wheelDelta" attribute.
The Code is as follows:
Copy codeThe Code is as follows:
Var addEvent = (function (){
If (window. addEventListener ){
Return function (el, sType, fn, capture ){
El. addEventListener (sType, fn, (capture ));
};
} Else if (window. attachEvent ){
Return function (el, sType, fn, capture ){
El. attachEvent ("on" + sType, fn );
};
} Else {
Return function (){};
}
})(),
StopEvent: function (event ){
If (event. stopPropagation ){
Event. stopPropagation ();
} Else {
Event. cancelBubble = true;
}
If (event. preventDefault ){
Event. preventDefault ();
} Else {
Event. returnValue = false;
}
},
ZoomIn = function (){},
ZoomOut = function (){},
// IsFirefox is a pseudo-code, which can be implemented by yourself
Mousewheel = isFirefox? "DOMMouseScroll": "mousewheel ";
// The object is a pseudo-code. You need to register the element of the Mousewheel event.
AddEvent (object, mousewheel, function (event ){
Var delta = 0;
Event = window. event | event;
StopEvent (event );
Delta = event. wheelDelta? (Event. Maid/120): (-event. detail/3 );
// ZoomIn, zoomOut is a pseudo-code, scaling event to be implemented
Delta> 0? ZoomIn (delta): zoomOut (Math. abs (delta ));
}, False );
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
