Home > Web Front-end > JS Tutorial > body text

Parsing mouse wheel events in javascript_javascript skills

WBOY
Release: 2016-05-16 15:57:52
Original
1332 people have browsed it

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);
}
Copy after login

Firefox does not support mousewheel

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

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; }
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!