A brief discussion on Mousewheel events_javascript skills

In fact, most browsers (IE6, IE7, IE8, Opera 10, Safari 5) provide the "mousewheel" event. Unfortunately, Firefox 3.5 does not support this event. Fortunately, Firefox 3.5 provides another equivalent event: "DOMMouseScroll" (a test case for events and event properties).

<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> <h1 id="Mousewheel-Event-in-JavaScript">Mousewheel Event in JavaScript</h1> <ol> <li>IE6, IE7, IE8, Opera 10, Safari 5 support mousewheel.</li> <li>Firefox 3.5 supports 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> <div id="J_Box01" class="box">Mousewheel Event: mousewheel</div> <div id="J_Box02" class="box">Mousewheel Event: DOMMouseScroll </div> <p id="J_Result" class="result"></p> <p>Related Articles: <a href="http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/">http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/</a></p>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

OK, we now know To account for the implementation differences between different browsers, the compatible code is as follows:

Copy code

The 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 pseudo code, you can implement it yourself
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
// object is also pseudocode, you need to register the element of Mousewheel event
addEvent(object, mousewheel, function(event){
event = window.event | | event;
// todo something
}, false);

Let’s go back to the interactive effect to be achieved. Now there are some other problems that need to be solved:
1. Should the page font be enlarged or reduced? ==> Does the mouse wheel scroll up or down?
2. What is the multiple of page font scaling? ==> What is the scrolling range of the mouse wheel?
Fortunately, we can get this information through some attribute values ​​​​of the event:
1. "event.wheelDelta" attribute value in the "mousewheel" event: the returned value, if it is a positive value, it means that the wheel is up Scroll, if it is a negative value, it means that the wheel is scrolling downward; the returned values ​​are all multiples of 120, that is: amplitude = returned value / 120.
2. "event.detail" attribute value in the "DOMMouseScroll" event: the returned value. If it is a negative value, it means that the wheel is scrolling upward (just the opposite of "event.wheelDelta"). If it is a positive value, it means that the wheel is scrolling upward. Scroll down; the returned values ​​are all multiples of 3, that is: amplitude = returned value/3.
3. The “mousewheel” event is a special case in Opera 10. It has both the “event.wheelDelta” attribute and the “event.detail” attribute.
Note: For the third point above, there is this comment in the article "The onmousewheel event of JavaScript":

Copy code

The code is as follows:

In Opera, “detail” returns the same value as it does in FF, so for the big O you should rely on “detail” instead of “wheelDelta”, which depending on the Opera version may return a different value than in IE's.

<script> (function(){ 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(){}; } })(), elBox01 = document.getElementById('J_Box01'), elBox02 = document.getElementById('J_Box02'), elResult = document.getElementById('J_Result'); // IE6/IE7/IE8/Opera 10+/Safari5+ addEvent(elBox01, 'mousewheel', function(event){ event = window.event || event ; elResult.innerHTML = 'This browser support <strong>mousewheel event! event.wheelDelt: <strong>' + (event.wheelDelta ? event.wheelDelta : '0') + ' event.detail: <strong>' + (event.detail ? event.detail : '0') + ''; }, false); // Firefox 3.5+ addEvent(elBox02, 'DOMMouseScroll', function(event){ event = window.event || event ; elResult.innerHTML = 'This browser support <strong>DOMMouseScroll event! event.wheelDelt: <strong>' + (event.wheelDelta ? event.wheelDelta : '0') + ' event.detail: <strong>' + (event.detail ? event.detail : '0') + ''; }, false); })(); </script>
However, after testing, the event.wheelDelta attribute in Opera 9 and Opera 10 behaves exactly the same as in other browsers, and no exceptions or errors were found. From an interface perspective, "event.wheelDelta" should be used first in the code property.
The code at this time is as follows:

Copy code The 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 pseudo code, you can Implement it yourself
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
// object is pseudo code, you need to register the element of Mousewheel event
addEvent(object, mousewheel, function(event){
var delta = 0;
event = window.event || event;
stopEvent(event);
delta = event.wheelDelta ? (event.wheelDelta / 120) : (- event.detail / 3 ;