Javascript鼠标滚轮事件兼容写法

1.mousewheel事件(兼容opera,chrome,safari,IE)

mousewheel事件对应的event对象包含一个wheelDelta属性。用户滚动鼠标滚轮时，wheelDelta的值是正负120的倍数。

值得注意的是，在opera9.5之前的版本，wheelDelta的正负号是颠倒的，这里不做考虑

一般情况下，监听wheelDelta的正负值，就可以确定鼠标滚轮的滚动方向。

document.addEventListener('mousewheel',function(event){console.log( event.wheelDelta > 0 )
},false)
复制代码

2.DOMMouseScroll事件(兼容FireFox)

FireFox支持一个名为DOMMouseScroll的类似事件，类比于mousewheel。不同的是，鼠标滚轮的信息保存在detail属性里面。还有一点，用户滚动鼠标滚轮时，detail的值是正负3的倍数。

document.addEventListener('DOMMouseScroll',function(event){console.log( event.detail > 0 )
},false)
复制代码

3.跨浏览器兼容写法

var eventHandle = {getEvent: function(event){return event || window.event;},addEvent: function(element, type, handler){if(element.addEventListener){element.addEventListener(type, handler, false);}else if(element.attachEvent){element.attachEvent('on'+type, handler);}else{element['on'+type] = handler;}},getWheelDelta: function(event){return event.wheelDelta ? event.wheelDelta : (-event.detail)*40;}
}function mouseHandle(event){event = eventHandle.getEvent(event);var delta = eventHandle.getWheelDelta(event);console.log( delta )
}eventHandle.addEvent(document, 'mousewheel', mouseHandle);
eventHandle.addEvent(document, 'DOMMouseScroll', mouseHandle);
复制代码

转载于:https://juejin.im/post/5cc7ab876fb9a0322758c75c

Javascript鼠标滚轮事件兼容写法相关推荐

JavaScript 鼠标滚轮事件（实现导航栏上滚显示）
文章目录 detail与wheelDelta 上下滚动检测隐藏导航栏例子当在垂直方向滚动页面时就会触发 mousewheel 事件 detail与wheelDelta 判断鼠标滚轮滚动方向在各浏览 ...
java响应鼠标滚轮事件_鼠标滚轮事件MouseWheel
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
JS鼠标滚轮事件详解
鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...
html鼠标滚轮监听,javascript监听鼠标滚轮事件浅析
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监 ...
html页面禁止滚轮事件,javascript实现禁止鼠标滚轮事件
平时我们兼容什么东西总是在调整低版本IE的兼容性,但是这回不是因为低版本浏览器不给力.而是因为火狐给力过头了,完全不顾其它浏览器的感受标新立异了.除了火狐之外,所有的浏览器都可以使用MouseWhee ...
火狐浏览器兼容鼠标滚轮事件
火狐浏览器兼容鼠标滚轮事件起因: this.$refs.canvasDivBox.addEventListener('mousewheel', this.zoomInOrOut, false); 这 ...
火狐兼容鼠标滚轮事件
问题 mousewheel在火狐上不生效,火狐鼠标滚轮事件是DOMMouseScroll // 判断是否火狐浏览器,兼容鼠标滚轮事件(一个简单的方法) 谷歌是e.wheelDelta值是120和-12 ...
js中的鼠标滚轮事件
## 事件对象 event1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标)window.onclick = functi ...
鼠标滚轮事件及解决滚轮事件多次触发问题
转载:https://www.cnblogs.com/jjxhp/p/11736066.html#_label0 一.滚轮事件的 js 写法二.jQuery写法三.参考四.滚轮事件滚动过快,事件 ...

Javascript鼠标滚轮事件兼容写法

Javascript鼠标滚轮事件兼容写法相关推荐

最新文章

热门文章