Parsing mouse wheel events in javascript_javascript skills

All modern browsers support the mouse wheel and fire when the user scrolls the wheel. Browsers typically use the mouse wheel to scroll or zoom documents, but these default actions can be prevented by canceling the mousewheel event. There are some interoperability issues affecting scroll wheel events, but writing cross-platform code is still possible. All browsers except Firefox support the "mousewheel" event, but Firefox uses "DOMMouseScroll", and the draft level 3 DOM event specification recommends using the event name "wheel" instead of "mousewheel".

document.body.onmousewheel = function(event){
  event = event || window.event;
  console.dir(event);
}

Firefox does not support mousewheel

document.body.addEventListener("DOMMouseScroll",function(event){
  console.dir(event);
})

The following scroll wheel scrolls down is the console output under chrome and IE9

The following is the console output of Firefox when scrolling down with the scroll wheel

From the above output, you can use the non-standard DOMMouseScroll event to replace mousewheel, and use the detail attribute of the event object to replace wheelDetal. However, the scaling ratio and sign of the detail attribute value are different from wheelDetal, and the detail value multiplied by -40 is equal to the wheelDetal value.

In browsers other than FireFox, the up and down scrolling is related to the wheelDelta below.

According to the test, under my win7 system, no matter IE7, IE10, Opera12, or safari5.1, every time I scroll down, the event.wheelDelta value is -120.

For FireFox browser (also available in Opera browser), the attribute to determine the mouse scrolling direction is event.detail, and the scroll down value is 3.

It should be noted that the positive and negative values ​​of the FireFox browser's direction judgment are opposite to those of other browsers. Scroll down in FireFox browser is positive value, while in other browsers it is negative value.

var isFirefox = (navigator.userAgent.indexOf("Firefox") !== -1);
if(isFirefox){
  element.addEventListener("DOMMouseScroll",wheelHandler,false);
}
element.onmousewheel = wheelHandler;
//element.onwheel = wheelHandler; //DOM3级wheel事件，经过测试IE9还是不支持，但是谷歌和火狐都支持，在谷歌内有wheelDelta在火狐里面有detail
function wheelHandler(event){ event = event || window.event; var delta = event.wheelDelta || detail*-30; }

The above is the entire content of this article, I hope you all like it.