A brief analysis of javascript monitoring mouse wheel events_javascript skills

We have all seen these effects. Use the mouse wheel to increase or decrease the numbers in a form, or use the mouse wheel to control the left and right, up and down scrolling of a button. These are all implemented through js event monitoring of the mouse wheel. What we introduce here today is some simple js monitoring of mouse wheel events.

Different events in different browsers

First of all, different browsers have different scroll wheel events. There are mainly two types, onmousewheel (not supported by firefox) and DOMMouseScroll (only supported by firefox). I will not go into details about these two events here. Friends who want to know more, please go to: mousewheel (mousewheel) and DOMMouseScroll events.
In addition, event listening needs to be added during the operation. The code is as follows: Compatible with firefox, use addEventListener to monitor

Copy the code The code is as follows :

/*Register events*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window .onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

js returns numerical value to judge the up and down of the scroll wheel

When judging whether the scroll wheel is up or down, compatibility must also be considered in the browser. Currently, among the five major browsers (IE, Opera, Safari, Firefox, Chrome), Firefox uses detail, and the other four types use wheelDelta; both of them only use wheelDelta. The values ​​are inconsistent, which means the meaning is consistent. detail and wheelDelta only take two values ​​each, detail only takes ±3, and wheelDelta only takes ±120, where positive numbers represent upwards and negative numbers represent downwards.
The specific code is as follows:

Copy code The code is as follows:

< label for="wheelDelta">Scroll value:(IE/Opera)
Scroll value: (Firefox)

By running the above code we can see:

Copy code The code is as follows:

In non-firefox browsers, the scroll wheel returns when scrolling up The value is 120, and scrolling down returns -120
. In the Firefox browser, scrolling the wheel up returns a value of -3, scrolling down returns 3
The code part is as follows, e.wheelDelta is used to determine whether it is non- Firefox browser, e.detail is Firefox browser
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail) {//Firefox
t2.value=e.detail;
}