当前位置：首页 → 问答吧 → 鼠标滚动事件分析

鼠标滚动事件分析

时间：2010-08-19

来源：互联网

首先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。

查看原文

作者: cloudgamer 发布时间: 2010-08-19

good，这个问题也是比较常见的。

但是，各浏览器在 document 上支持这个事件，是不是表明所有的元素都支持呢？

比如对于一个 div，各浏览器的支持情况又是怎样的呢？还有window对象呢？

window对象的mousewheel 好像只有Safari，chrome，和Opera支持

作者: WebAdvocate 发布时间: 2010-08-19