鼠标滚轮事件详解 鼠标滚轮

3 二

Posted by: walkingp in: javascript

?View Code JAVASCRIPT

/*Firefox注册事件*/

if(document.addEventListener){

document.addEventListener("DOMMouseScroll",scrollFunc,false);

}

Safari与Chrome属于同一类型，可使用HTML DOM方式添加事件

?View Code JAVASCRIPT

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

其中除Firefox外其余均可使用HTML DOM方式添加事件，因此添加事件使用以下方式

?View Code JAVASCRIPT

/*注册事件*/

if(document.addEventListener){

document.addEventListener("DOMMouseScroll",scrollFunc,false);

}//W3C

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

detail与wheelDelta

判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个 值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。 ?View Code JAVASCRIPT

滚动值:(IE/Opera)

滚动值:(Firefox)

点击预览效果

Chrome

Firefox

IE(8)

IE(6)

Opera

Safari

Related posts:

1. js 仿Photoshop鼠标滚轮控制输入框取值（修正兼容Chrome） js 仿Photoshop鼠标滚轮控制输入框取值。原理是监听鼠标滚轮事件；可将此效果继续发散到其他应用上，如图片缩放，页面缩放等。...

2. ie中的onreadystatechange问题 ie 中的onreadystatechange是非常好的一个函数，它代表所有dom元素框架加载完毕后执行，onload是要等到所有dom元素的所有东西 完全加载后执行，例如网页中有一张很大的图片，那个使用onreadystatechange就是页面一把最基本的框架加载完毕就执行，而 onload则要等到那张图片下载完成后才开始执行。这样的话可能会出现一些问题，如我之前使用使用js制作导航条的滑动门，但是我放在了相关的html 元素之后，我瞬间鼠标移到元素上就会发生js报错，“无法找到对象”；使用onload也会出现这种情况。于是这时

document.onreadystatechange就非常符合这种应用场