浅谈 Mousewheel 事件

时间:2021-05-18

其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:”DOMMouseScroll” (事件和事件属性的测试案例)。
Mousewheel Event in JavaScript body { padding:5px 10px; } .box { width:300px; height:150px; padding:10px; border:1px solid #999; background:#999; margin-bottom:20px; } .result strong { color:#f00; }

Mousewheel Event in JavaScript

  • IE6, IE7, IE8, Opera 10+, Safari 5+ support mousewheel.
  • Firefox 3.5+ support DOMMouseScroll.
  • IE6, IE7, IE8, Opera 10+, Safari 5+ support event.wheelDelta.
  • Firefox 3.5+, Opera 10+ support event.detail.
  • The event.wheelDelta value is a multiple of 120.
  • The event.detail value is a multiple of 3.
  • Mousewheel Event: mousewheel Mousewheel Event: DOMMouseScroll

    Related Articles: http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/

    [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
    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 onmousewheel 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);

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章