javascript 滑鼠滾輪事件例子

滾輪事件的相容性差異有些不拘一格，不是以往的IE8-派和其他派，而是FireFox派和其他派。

包括IE6在內的瀏覽器是使用onmousewheel，而FireFox瀏覽器一個人使用DOMMouseScroll. 經自己測試，即使現在FireFox 19下，也是不識onmousewheel。

代碼如下	複製代碼
//非ie document.body.onmousewheel = function(event) {     event = event || window.event;     console.dir(event); }; //firefox document.body.addEventListener("DOMMouseScroll", function(event) {     console.dir(event); });

IE和其他的主流瀏覽器可以使用傳統的事件綁定模型。但不要使用IE專有的attachEvent方法，其他主流瀏覽器並不識別微軟的這個方法。下面先測試一下。

-120

代碼如下

複製代碼

<script type="text/javascript"> // <![CDATA[ var mouseWheel = document.getElementById('mouseWheel');   if (mouseWheel.addEventListener) {   mouseWheel.addEventListener('DOMMouseScroll', function(event) {   event.target.innerHTML = event.detail; event.stopPropagation(); event.preventDefault();   }, false); } mouseWheel.onmousewheel = function(event) {   event = event || window.event; mouseWheel.innerHTML = event.wheelDelta; event.returnValue = false;   } // ]]> </script>

測試之後得到如下的結論。
Firefox
滑鼠滾輪向上滾動是-3，向下滾動是3

IE
滑鼠滾輪向上滾動是120，向下滾動是-120

Safari
滑鼠滾輪向上滾動是360，向下滾動是-360

Opera
滑鼠滾輪向上滾動是120，向下滾動是-120

Chrome
滑鼠滾輪向上滾動是120，向下滾動是-120