各浏览器的鼠标滚轮事件

2019-7-11
之前看尚硅谷李立超的JS基础，发现其中的鼠标滚轮事件与现在使用的有一些出入。

         /** 简单来说，如果不需要兼容IE浏览器，则使用 onwheel 属性即可*/box1.onwheel = function(){//代码..}/** 如果需要兼容IE浏览器，则需要结合 onmousewheel 和 onwheel 属性（代码及结构可自行优化）*///只对Chrome和IE有效box1.onmousewheel = function(){//代码...}//只对IE无效box1.onwheel = function(){//代码...}/*  * 现在大多用 event.deltaY 进行滚轮取值与判断* 在各浏览器中滚轮取值如下：*       -   火狐：向上为-3，向下为3 *       - Chrome：向上为-125，向下为125*      -   Edge：向上为-135.60000610351562，向下为135.60000610351562*        -   360：向上为-100，向下为100*       -   搜狗：向上为-100，向下为100                             */alert(event.deltaY);/** 至于IE浏览器的滚轮取值与判断，视频中使用 event.wheelDelta 可操作，*     但我自己操作的时候IE却没有反应，可能是我自己的问题，大家自行测试*//**   测试时各浏览器版本如下：*        -  chrome：75.0.3770.100（正式版本）*         -  360浏览器：11.0.2140.0  内核版本：69.0.3497.100*        -  搜狗浏览器：8.5.10.30498*       -  火狐浏览器：68.0*       -  Edge：42.17134.1.0  EdgeHTML：17.17134*      -  IE：IE8、IE9、IE10、IE11*/

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;}</style><script type="text/javascript">/** 2019-7-11*  现在这一集视频中的方法、属性已经过时或失效*//** 需求：在box1范围内，当鼠标滚轮向下滚动时，box1变长，*               当鼠标向上滚动时，box1变短 */window.onload = function(){//获取id为box1的divvar box1 = document.getElementById("box1");//为box1绑定一个鼠标滚轮滚动的事件/** 视频中使用的是 onmousewheel 属性* onmousewheel 属性在火狐中无效，在Chrome和IE(包括各版本IE)中有效*    注意：该属性已经过时，现在是使用 onwheel 属性*/
//              box1.onmousewheel = function(){//                  alert("滚了");
//              }/** onwheel 属性对除IE外的浏览器都支持(即，对Chrome和火狐都支持)，*                    因此不需要视频中的 DOMMouseScroll属性来针对火狐* onmousewheel 属性对Chrome和IE有效*   因此，除两者结合使用*/
//              //对Chrome和IE有效
//              box1.onmousewheel = function(){//              alert("滚了1");
//              }
//              //对除IE外有效
//              box1.onwheel = function(){//              alert("滚了2");
//              }//两段代码都写，此时三个浏览器都生效//对于Chrome来说，两段代码都有效，因此因为执行顺序而下面的代码覆盖了上面的，因此输出结果为：滚了2/** 其他浏览器：*                  -   搜狗浏览器：两个属性都支持，代码执行与Chrome相同*                  - 360浏览器：两个属性都支持，代码执行与Chrome相同*                   - Edge：两个属性都支持，代码执行与Chrome相同*//** 因此，如果项目需要兼容IE浏览器，则需要使用onmousewheel属性，*      如果不需要兼容IE，则以下浏览器使用onwheel即可：*        Chrome、360、搜狗、火狐、Edge*///为box1绑定一个鼠标滚轮滚动的事件box1.onwheel = function(event){event = event || window.event;//判断鼠标滚轮滚动的方向/** 视频中用 event.wheelDelta 可以获取鼠标滚轮滚动的方向*     向上为150，向下为-150*      注意：滚轮的滚动只需要看正负号，不需要关心具体的数值*   这个属性火狐中不支持*     注意：event.wheelDelta 属性现在火狐中滚轮向上、向下取值都是0,*                即，该方法现在在火狐中失效*               在Edge中有效，向上为120，向下为-120*//** 但是，视频中这个属性在IE中有效，我自己操作的时候却无效？？？？？？*/
//                  alert(event.wheelDelta);/*  * 现在大多用 event.deltaY 进行滚轮取值与判断* 在各浏览器中滚轮取值如下：*       -  火狐：向上为-3，向下为3  *       -  Chrome：向上为-125，向下为125*         -  Edge：向上为-135.60000610351562，向下为135.60000610351562*         -  360：向上为-100，向下为100*        -  搜狗：向上为-100，向下为100                              */
//                  alert(event.deltaY);//判断鼠标滚轮滚动的方向if(event.deltaY < 0){//向上滚，box1变短//clientHeight位可见高度box1.style.height = box1.clientHeight - 10 + "px";}else if(event.deltaY > 0){//向下滚，box1变长box1.style.height = box1.clientHeight + 10 + "px";}/** 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false* 需要使用event来取消默认行为event.preventDefault();* 但是IE8不支持event.preventDefault();，如果直接调用会报错*/
//                  event.preventDefault && event.preventDefault();/** 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，* 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为*/return false;}};function bind(obj , eventStr , callback){if(obj.addEventListener){//大部分浏览器兼容的方式obj.addEventListener(eventStr , callback , false);}else{/** this是谁由调用方式决定* callback.call(obj)*///IE8及以下obj.attachEvent("on"+eventStr , function(){//在匿名函数中调用回调函数callback.call(obj);});}}</script></head><body style="height: 2000px;"><div id="box1"></div></body>
</html>

结果如下图所示：

各浏览器的鼠标滚轮事件相关推荐

火狐浏览器兼容鼠标滚轮事件
火狐浏览器兼容鼠标滚轮事件起因: this.$refs.canvasDivBox.addEventListener('mousewheel', this.zoomInOrOut, false); 这 ...
jquery的鼠标滚轮插件 Mousewheel响应跨浏览器的鼠标滚轮事件
jquery插件默认是不支持鼠标中轮滚轮事件的,现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jquery的Mousewheel插件. 使用mousewheel事件有以下两种方式: 使用mouse ...
鼠标滚轮事件（mousewheel / DOMMouseScroll）兼容性处理
鼠标滚轮事件(mousewheel / DOMMouseScroll)兼容性处理非Firefox浏览器中在非 Firefox 浏览器中,使用 mousewheel 事件来监听鼠标的滚轮事件,通过事 ...
html 页面缩放事件,使用HTML5实现通过鼠标滚轮事件放大和缩小图片的功能
您和我都知道,向HTML5网页添加鼠标滚轮事件可以更好地允许用户与网页进行交互. 在HTML5中,鼠标滚轮不仅可以在网页上上下滑动,实际上,您还可以依靠它来完成更,例如放大和缩小视图平面. 看看实际的 ...
解决chrome浏览器中鼠标滚轮滚动事件失效的问题
今天遇到了一个html5页面由于开启了图片遮罩层在chrome浏览器中,鼠标滚轮上下滚动时,页面不动的问题,后查询相关资料后解决,具体方法是加入如下代码: <script type=" ...
java响应鼠标滚轮事件_一文读懂鼠标滚轮事件（wheelEvent）
最近在用VUE写一个后台管理系统,顶部标签页涉及鼠标滚轮事件,由于每个浏览器对滚轮事件的处理方式不一样,个人对这个又不懂,折腾了很久,参考了大神的代码,也把百度翻烂了,找到了一篇陈旧的博文(其实是主题 ...
JS鼠标滚轮事件详解
鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...
js中的鼠标滚轮事件
## 事件对象 event1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标)window.onclick = functi ...
鼠标滚轮事件及解决滚轮事件多次触发问题
转载:https://www.cnblogs.com/jjxhp/p/11736066.html#_label0 一.滚轮事件的 js 写法二.jQuery写法三.参考四.滚轮事件滚动过快,事件 ...

各浏览器的鼠标滚轮事件

各浏览器的鼠标滚轮事件相关推荐

最新文章

热门文章