We have all seen these effects, using the mouse wheel to achieve the increase or decrease of the number in a certain form, or the scroll wheel controls the left and right of a button and scrolls up and down. These are all achieved through js' event monitoring of the mouse wheel. Today I will introduce a little simple js listening for mouse wheel events.
Different events in different browsers
First of all, different browsers have different scroll events. There are mainly two types: onmousewheel (firefox does not support) and DOMMouseScroll (only firefox supports). I will not explain these two events in detail here. If you want to know, please move: mousewheel (mousewheel) and DOMMouseScroll events.
In addition, event listening needs to be added during operation, the code is as follows: Compatible with firefox, use addEventListener to listen
Copy the code as follows:/*Register event*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
js return numerical value to determine the up and down of the scroll wheel
Compatibility should also be considered in the browser when determining whether the scroll wheel is up or down. Now Firefox uses detail in the five major browsers (IE, Opera, Safari, Firefox, Chrome), and the other four categories use wheelDelta; the two are only inconsistent in terms of values, which means the meaning is consistent. Detail and wheelDelta only take two values each, detail only takes ±3, wheelDelta only takes ±120, where positive numbers are represented as up and negative numbers are represented as down.
The specific code is as follows:
The code copy is as follows:
<label for="wheelDelta">Scroll value:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
<label for="detail">Scroll value:(Firefox)</label><input type="text" id="detail"/>
<script type="text/javascript">
var scrollFunc=function(e){
e=e || window.event;
var t1=document.getElementById("wheelDelta");
var t2=document.getElementById("detail");
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
t2.value=e.detail;
}
}
/*Register Event*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
</script>
By running the above code we can see:
The code copy is as follows:
In non-firefox browsers, the value returned by the scroll wheel scrolling up is 120, and the value returned by the scrolling down is -120
In the firefox browser, the value returned by the scroll wheel scrolling up is -3, and the value returned by the scrolling down is 3.
The code part is as follows: e.wheelDelta determines whether it is a non-firefox browser, and e.detail is a firefox browser
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
t2.value=e.detail;
}
PS: Here I recommend an online query tool about JS events, which summarizes the commonly used event types and function functions of JS:
A complete list of javascript events and functions:
http://tools.VeVB.COM/table/javascript_event