获得鼠标滚轮事件

最新推荐文章于 2021-12-18 17:49:15 发布

weixin_34326558

最新推荐文章于 2021-12-18 17:49:15 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/mfkwfc/blog/136699

本文介绍了一种处理鼠标滚轮事件的JavaScript方法，该方法实现了跨浏览器的兼容性，并提供了一个示例来演示如何使用这个函数。文章还讨论了不同浏览器间滚轮事件的差异及其解决方案。

为什么80%的码农都做不了架构师？>>>

$.wheel=function(obj,callback){
        var wheelType = "mousewheel"
        try{
            document.createEvent("MouseScrollEvents")
            wheelType = "DOMMouseScroll"
        }catch(e){}
        	$.addEvent(obj, wheelType,function(event){
                if ("wheelDelta" in event){//统一为±120，其中正数表示为向上滚动，负数表示向下滚动
                    var delta = event.wheelDelta
                    //opera 9x系列的滚动方向与IE保持一致，10后修正
                    if( window.opera && opera.version() < 10 )
                        delta = -delta;
                    //由于事件对象的原有属性是只读，我们只能通过添加一个私有属性delta来解决兼容问题
                    event.delta = Math.round(delta) /120; //修正safari的浮点 bug
                }else if( "detail" in event ){
                    event.wheelDelta = -event.detail * 40//为FF添加更大众化的wheelDelta
                    event.delta = event.wheelDelta /120  //添加私有的delta
                }
                callback.call(obj,event);//修正IE的this指向
        });
    };
    $.addEvent=function(el, type, callback, useCapture  ){
        if(el.dispatchEvent){//w3c方式优先
            el.addEventListener( type, callback, !!useCapture  );
        }else {
            el.attachEvent( "on"+type, callback );
        }
        return callback;//返回callback方便卸载时用
    }

调用方式：$.wheel(document.getElementById("mycustomer"),function(e){alert(e.delta);}); 返回1 or -1

转载于:https://my.oschina.net/mfkwfc/blog/136699