火狐浏览器兼容鼠标滚轮事件

起因：

this.$refs.canvasDivBox.addEventListener('mousewheel', this.zoomInOrOut, false);

这段代码在chrome中运行正常，但是到firefox中时则不会被触发。

原因：

firefox不支持mousewheel，请使用DOMMouseScroll。

修改：

this.$refs.canvasDivBox.addEventListener('mousewheel', this.zoomInOrOut, false) || this.$refs.canvasDivBox.addEventListener('DOMMouseScroll', this.zoomInOrOut, false);

其他区别：

1.使用mousewheel时，可以用e.deltaY的正负判断滑轮滚动方向，DOMMouseScroll则没有这个参数，可以用detail代替。

2.据笔者观察，两种事件在某些情况下layerX的意义和取值也会有差别，详细原因还不明，可以按照具体情况进行计算或是取值。

火狐浏览器兼容鼠标滚轮事件相关推荐

火狐兼容鼠标滚轮事件
问题 mousewheel在火狐上不生效,火狐鼠标滚轮事件是DOMMouseScroll // 判断是否火狐浏览器,兼容鼠标滚轮事件(一个简单的方法) 谷歌是e.wheelDelta值是120和-12 ...
各浏览器的鼠标滚轮事件
2019-7-11 之前看尚硅谷李立超的JS基础,发现其中的鼠标滚轮事件与现在使用的有一些出入. /** 简单来说,如果不需要兼容IE浏览器,则使用 onwheel 属性即可*/box1.onwhee ...
jquery的鼠标滚轮插件 Mousewheel响应跨浏览器的鼠标滚轮事件
jquery插件默认是不支持鼠标中轮滚轮事件的,现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jquery的Mousewheel插件. 使用mousewheel事件有以下两种方式: 使用mouse ...
鼠标滚轮事件onmouewheel
鼠标滚轮事件onmouewheel 1. onmouewheel 事件触发条件:当鼠标滚轮向上或者向下滚动时用法: document.onmousewheel = function() {} ...
鼠标滚轮事件（mousewheel / DOMMouseScroll）兼容性处理
鼠标滚轮事件(mousewheel / DOMMouseScroll)兼容性处理非Firefox浏览器中在非 Firefox 浏览器中,使用 mousewheel 事件来监听鼠标的滚轮事件,通过事 ...
html 页面缩放事件,使用HTML5实现通过鼠标滚轮事件放大和缩小图片的功能
您和我都知道,向HTML5网页添加鼠标滚轮事件可以更好地允许用户与网页进行交互. 在HTML5中,鼠标滚轮不仅可以在网页上上下滑动,实际上,您还可以依靠它来完成更,例如放大和缩小视图平面. 看看实际的 ...
鼠标滚轮事件（谷歌或火狐）
全部代码: 分部说明: 1.首先在body标签里给个div标签,div里打上鼠标滚轮事件,方便之后在浏览器上,当鼠标滚轮滚动时,就可以明显看出页面有在滚动 2.写div样式.直接在head标签里给个s ...
解决chrome浏览器中鼠标滚轮滚动事件失效的问题
今天遇到了一个html5页面由于开启了图片遮罩层在chrome浏览器中,鼠标滚轮上下滚动时,页面不动的问题,后查询相关资料后解决,具体方法是加入如下代码: <script type=" ...
js中的鼠标滚轮事件
## 事件对象 event1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标)window.onclick = functi ...

火狐浏览器兼容鼠标滚轮事件

火狐浏览器兼容鼠标滚轮事件

起因：

原因：

修改：

其他区别：

火狐浏览器兼容鼠标滚轮事件相关推荐

最新文章

热门文章