Javascript: disables the scroll wheel event.

Javascript: disables the scroll wheel event.

At ordinary times, we are always adjusting the compatibility of low version IE, but this is not because the low version browser is not powerful. But because Firefox is too powerful, it is totally different from the feelings of other browsers. In addition to Firefox, all browsers can use the MouseWheel event to handle the response of the mouse wheel. However, Firefox does not support MouseWheel, but uses DOMMouseScroll with no headers. This is incompatible with Firefox and other browsers. That is to say, Firefox can only use DOMMouseScroll to handle mouse scroll events. Firefox can only use MouseWheel. The two events have different implementation principles, and they process different data.

var firefox = navigator.userAgent.indexOf('Firefox') != -1;firefox ? img.addEventListener('DOMMouseScroll', MouseWheel, false) :      (img.onmousewheel = MouseWheel);   function MouseWheel(e) {    e = e || window.event;     if (e.stopPropagation) e.stopPropagation();    else e.cancelBubble = true;         if (e.preventDefault) e.preventDefault();    else e.returnValue = false;   }

Let's take a look at the complete code.

<! DOCTYPE html> <style> span {font: 14px/20px ;} # counter {width: 50px; height: 20px; border: 1px solid # CCC; background: # F9F9F9; font: 14px/20px Consolas; text-align: center; margin: 10px ;} </style> <span> use the scroll wheel to adjust the value </span> <br/> <div id = "counter"> 0 </div> <script> // judge browser var isIE = navigator. userAgent. match (/MSIE (\ d)/I); isIE = isIE? IsIE [1]: undefined; var isFF =/FireFox/I. test (navigator. userAgent); // obtain the element var counter = document. getElementById ("counter"); // if (isIE <9) of the mouse wheel event // counter of the MouseWheel event in a traditional browser. attachEvent ("onmousewheel", function () {// calculates the scroll distance of the mouse wheel. // a grid of 3 rows, each row is 40 pixels. Therefore, divided by 120 var v = event. wheelDelta/120; counter. innerHTML = counter. innerHTML * 1 + v; // the default method of blocking browsers: return false;}); else if (! IsFF) // modern browsers except Firefox also use the MouseWheel event counter. addEventListener ("mousewheel", function (e) {// calculate the distance from the scroll wheel var v = e. wheelDelta/120; counter. innerHTML = counter. innerHTML * 1 + v; // block the default browser Method e. preventDefault () ;}, false); else // use DOMMouseScroll event counter for the wonderful Firefox. addEventListener ("DOMMouseScroll", function (e) {// calculate the scroll distance of the mouse wheel. // a grid contains three rows, the difference here is that it is a negative value var v =-e. detail/3; counter. innerHTML = counter. innerHTML * 1 + v; // block the default browser Method e. preventDefault () ;}, false); </script>

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