专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > 跨浏览器开发

鼠标滚动事件分析解决方案

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
鼠标滚动事件分析
首先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在各个浏览器的比较,貌似很头大啊,太多种情况了
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: