• mousewheel滚轮事件


    原生的滚轮事件:火狐与其他浏览器使用了不同的事件

    /* 
     * 滚轮事件只有firefox比较特殊,使用DOMMouseScroll; 其他浏览器使用mousewheel;
     * 
    */
    // firefox
    document.body.addEventListener("DOMMouseScroll", function(event) {
    
        var direction= event.detail && (event.detail > 0 ? "mousedown" : "mouseup");
        console.log(direction);    
    });
    
    // chrome and ie
    document.body.onmousewheel = function (event) {
        event = event || window.event;
    
        var direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");
        console.log(direction);
    };

    使用jquery兼容后的事件

    // jquery 兼容的滚轮事件
    $(document).on("mousewheel DOMMouseScroll", function (e) {
        
        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                    (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox
    
        
        if (delta > 0) {
            // 向上滚
            console.log("wheelup");
        } else if (delta < 0) {
            // 向下滚
            console.log("wheeldown");
        }
    });
  • 相关阅读:
    ES6——Promise
    ES6——generator-yield
    ES6——generator
    JQuery——关于CDN(内容分发网络)
    关于JSON使用要注意的地方
    第7课
    第6课
    第5课
    第4课
    第3课
  • 原文地址:https://www.cnblogs.com/xiankui/p/3822546.html
Copyright © 2020-2023  润新知