首页 > 代码库 > 鼠标滚轮事件MouseWheel

鼠标滚轮事件MouseWheel

2024-07-05 14:54:20   227人阅读

其实在大多数浏览器（IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome）中，都提供了 “mousewheel” 事件。但杯具的是 Firefox 却不支持此事件，不过庆幸 Firefox  中提供了另外一个等同的事件：”DOMMouseScroll” 。

OK，我们现在已经知道了不同浏览器之间实现的差别，兼容代码如下：

var addEvent = (function () {
    if (window.addEventListener) {
        return function (el, sType, fn, capture) {
            el.addEventListener(sType, fn, (capture));
        };
    } else if (window.attachEvent) {
        return function (el, sType, fn, capture) {
            el.attachEvent("on" + sType, fn);
        };
    } else {
        return function () {};
    }
})(),
// isFirefox 是伪代码，大家可以自行实现
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
// object 也是伪代码，你需要注册 Mousewheel 事件的元素
addEvent(object, mousewheel, function (event) {
    event = window.event || event;
    // todo something
}, false);
 

我们再回到要实现的交互效果上，现在还有其他一些问题需要来解决：
1. 页面字体到底是放大还是缩小呢？ ==> 鼠标滚轮是向上滚动还是向下滚动呢？
2. 页面字体缩放的倍数到底是多少呢？ ==> 鼠标滚轮滚动的幅度大小是多少呢？
还好，我们可以通过 event 的某些属性值得到这些信息：
1. “mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。
2. “DOMMouseScroll” 事件中的 “event.detail” 属性值：返回的值，如果是负值说明滚轮是向上滚动（与 “event.wheelDelta” 正好相反），如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数，即：幅度大小 = 返回的值 / 3。
3. “mousewheel” 事件在 Opera 10+ 中却是个特例，既有 “event.wheelDelta” 属性，也有 “event.detail” 属性。
注：上面第三点，在《The onm ousewheel event of JavaScript》一文中有这样一段批注：

In Opera, “detail” returns the same value as it does in FF, so for the big O you should rely on “detail” 
instead of “wheelDelta”, which depending on the Opera version may return a different value than in IE‘s.

但经测试， Opera 9+ 和 Opera 10+ 中的 event.wheelDelta 属性与其他浏览器中的表现完全一致，未发现异常与错误，从接口角度来说，代码中应优先使用 “event.wheelDelta” 属性。此时代码如下：

var addEvent = (function () {
    if (window.addEventListener) {
        return function (el, sType, fn, capture) {
            el.addEventListener(sType, fn, (capture));
        };
    } else if (window.attachEvent) {
        return function (el, sType, fn, capture) {
            el.attachEvent("on" + sType, fn);
        };
    } else {
        return function () {};
    }
})(),
stopEvent : function (event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
},
zoomIn = function () {},
zoomOut = function () {},
// isFirefox 是伪代码，大家可以自行实现
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
// object 是伪代码，你需要注册 Mousewheel 事件的元素
addEvent(object, mousewheel, function (event) {
    var delta = 0;
    event = window.event || event;
    stopEvent(event);
    delta = event.wheelDelta ? (event.wheelDelta / 120) : ( - event.detail / 3);
    // zoomIn, zoomOut 是伪代码，需要实现的缩放事件
    delta > 0 ? zoomIn(delta) : zoomOut(Math.abs(delta));
}, false);

jquery插件默认是不支持鼠标中轮滚轮事件的，现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jquery的Mousewheel插件。

使用mousewheel事件有以下两种方式：

使用mousewheel和unmousewheel事件函数；

使用经典的bind和unbind函数。

$(‘div.mousewheel_example‘).mousewheel(fn);  
$(‘div.mousewheel_example‘).bind(‘mousewheel‘, fn);

mousewheel事件的处理函数有一点小小的变化，它除了第一个参数event外，还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。如果delta的值是负的，那么滚轮就是向下滚动，正的就是向上。

以下是示例的源代码：

jQuery(function($) {  
    $(‘div.mousewheel_example‘)  
        .bind(‘mousewheel‘, function(event, delta) {  
            var dir = delta > 0 ? ‘Up‘ : ‘Down‘,  
                vel = Math.abs(delta);  
            $(this).text(dir + ‘ at a velocity of ‘ + vel);  
            return false;  
        });  
});

使用

要使用这个功能，只需对目标元素的’mousewheel’事件绑定事件处理函数即可。

Mousewheel插件还提供了两个事件函数：mousewheel和unmousewheel，可以对目标元素调用这两个函数，并在参数中指定回调函数。

事件的回调函数第一个参数为event，第二个参数为delta，代表鼠标滚轮的变化值。

以下是上面两种使用方式的示例：

// 绑定方式  
$(‘#my_elem‘).bind(‘mousewheel‘, function(event, delta) {  
    console.log(delta);  
});  
  
// 事件函数方式  
$(‘#my_elem‘).mousewheel(function(event, delta) {  
    console.log(delta);  
});

jquery的鼠标滚轮插件 Mousewheel下载

https://github.com/brandonaaron/jquery-mousewheel


联系
我们