zoukankan      html  css  js  c++  java
  • 鼠标滚轮事件

    不同浏览器存在差异,鼠标滚轮事件在各个浏览器中绑定事件如下:
    IE Chrome Opera Safari浏览器的注册事件:

    window.onmousewheel = document.onmousewheel = scrollFunc;      //scrollFunc为定义的事件名

    Firefox浏览器的注册事件:

    if (document.addEventListener) { 
        document.addEventListener('DOMMouseScroll', scrollFunc, false);  //scrollFunc为定义的事件名
    }

    不同浏览器滚动事件的属性也有差异:
    IE Chrome Opera Safari浏览器的属性:wheelDelta
    wheelDelta取值为±120,+120表示滚轮向上,-120表示滚轮向下
    Firefox浏览器滚动事件的属性:detail
    wheelDelta取值为±3,+3表示滚轮向上,-3表示滚轮向下

    实际应用:

    var scrollFunc = function (e) {  
        e = e || window.event;  
        if (e.wheelDelta) {             //IE Chrome Opera Safari       
            if (e.wheelDelta > 0) { 
                //业务操作...
                e.stopPropagation();    //终止事件的进一步传播
            }  
            if (e.wheelDelta < 0) { 
                //业务操作...
                e.stopPropagation();
            }  
        } 
        else if (e.detail) {            //Firefox
            if (e.detail < 0) { 
                //业务操作...
                e.stopPropagation();    //终止事件的进一步传播
            }  
            if (e.detail > 0) { 
                //业务操作...
                e.stopPropagation();
            }  
        }
      } 
      //注册事件
      if (document.addEventListener) {    //Firefox
        document.addEventListener('DOMMouseScroll', scrollFunc, false);  
      }  
      //IE Chrome Opera Safari
      window.onmousewheel = document.onmousewheel = scrollFunc;   
    
    

    因为事件属性wheelDelta和detail存在负值,if (e.wheelDelta)和else if (e.detail)这两段代码判断语句是否有误?
    是没有错误的,在js中if条件为null/undefined/0/NaN/”“表达式时,统统被解释为false,此外均为true。
    js中if表达式规则文章

  • 相关阅读:
    【1】
    正则表达式 re模块
    模块—— 序列化模块、random模块、os模块 、 sys模块、hashlib模块、collections模块
    编码转换 文件的操作
    函数进阶3 —— 生成器、yield from
    函数的进阶2
    函数进阶 —— 动态参数、内置空间、函数嵌套
    初识函数 函数参数 三元运算
    Sringboot jdbc 操作数据库
    python使用subprocess执行linux命令
  • 原文地址:https://www.cnblogs.com/wangqilong/p/10088374.html
Copyright © 2011-2022 走看看