滚轮事件的兼容性差异有些不拘一格，不是以往的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
时间： 2024-09-19 08:58:40