鼠标滚动事件分析解决方案
日期：2014-05-17 浏览次数：20714 次
鼠标滚动事件分析
首先ie是用mousewheel绑定事件的，使用event的wheelDelta来获取滚动参数。
其他浏览器用以下代码测试：
向下滚动一下，可以得到以下结果：
ff：DOMMouseScroll:3_undefined
opera：mousewheel:3_-120
chrome/safari：mousewheel:0_-120
可以看到事件的绑定，ff只支持DOMMouseScroll，其他就只支持mousewheel。
而滚动参数的获取，ff只支持detail，opera两种都支持，chrome/safari就支持wheelDelta。
ps：不明白chrome/safari的detail为什么是0，有其他用途？
而DOMMouseScroll跟mousewheel还有一个不同是前者不能直接绑定元素，后者可以。
即可以elem.onmousewheel，但不能elem.onDOMMouseScroll。
查看原文
------解决方案--------------------
good， 这个问题也是比较常见的。
但是，各浏览器在 document 上支持这个事件，是不是表明所有的元素都支持呢？
比如对于一个 div，各浏览器的支持情况又是怎样的呢？还有window对象呢？
window对象的mousewheel 好像只有Safari，chrome，和Opera支持
------解决方案--------------------
http://www.quirksmode.org/dom/events/scroll.html
这里面给了一个mousewheel在各个浏览器的比较，貌似很头大啊，太多种情况了
首先ie是用mousewheel绑定事件的，使用event的wheelDelta来获取滚动参数。
其他浏览器用以下代码测试：
- Assembly code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body style="height:1000px;">
<script>
function test(e){ alert(e.type+":"+e.detail+"_"+e.wheelDelta) }
document.addEventListener( "DOMMouseScroll", test, false );
document.addEventListener( "mousewheel", test, false );
</script>
</body>
</html>
向下滚动一下，可以得到以下结果：
ff：DOMMouseScroll:3_undefined
opera：mousewheel:3_-120
chrome/safari：mousewheel:0_-120
可以看到事件的绑定，ff只支持DOMMouseScroll，其他就只支持mousewheel。
而滚动参数的获取，ff只支持detail，opera两种都支持，chrome/safari就支持wheelDelta。
ps：不明白chrome/safari的detail为什么是0，有其他用途？
而DOMMouseScroll跟mousewheel还有一个不同是前者不能直接绑定元素，后者可以。
即可以elem.onmousewheel，但不能elem.onDOMMouseScroll。
查看原文
------解决方案--------------------
good， 这个问题也是比较常见的。
但是，各浏览器在 document 上支持这个事件，是不是表明所有的元素都支持呢？
比如对于一个 div，各浏览器的支持情况又是怎样的呢？还有window对象呢？
window对象的mousewheel 好像只有Safari，chrome，和Opera支持
------解决方案--------------------
http://www.quirksmode.org/dom/events/scroll.html
这里面给了一个mousewheel在各个浏览器的比较，貌似很头大啊，太多种情况了
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
