欢迎您访问DoraCMS 您可以登录 或注册
  • 微信客服:476847113微信客服
  • 微信公众号微信公众号
您现在的位置是:首页 > 插件

js鼠标滑轮滚动事件绑定(兼容主流浏览器)

doramart2015-07-15 15:05:37
今天尝试写基于jquery的滚动条,遇到了滚轮事件的兼容性问题,在firefox下和在IE下以及其它浏览器下,监听的事件有区别,查了下相关资料总结一下不同浏览器下鼠标滚轮事件兼容性的处理方式

今天尝试写基于jquery的滚动条,遇到了滚轮事件的兼容性问题,在firefox下和在IE下以及其它浏览器下,监听的事件有区别,查了下相关资料总结一下不同浏览器下鼠标滚轮事件兼容性的处理方式:


在 firefox 下 需要监听 DOMMouseScroll,即:


if (window.addEventListener) {
        /** DOMMouseScroll is for mozilla. */
        window.addEventListener('DOMMouseScroll', wheel, false);
    }


在IE或其它浏览器下,这样添加监听就可以了:


window.onmousewheel = document.onmousewheel = wheel;


/**
 * Created by Administrator on 2015/7/15.
 */
/** Event handler for mouse wheel event.
 *鼠标滚动事件
 */
$(function(){


    var wheel = function(event) {
        var delta = 0;
        if (!event) /* For IE. */
            event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
            delta = event.wheelDelta / 120;
        } else if (event.detail) {
            /** Mozilla case. */
            /** In Mozilla, sign of delta is different than in IE.
             * Also, delta is multiple of 3.
             */
            delta = -event.detail / 3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta)
            handle(delta);
        /** Prevent default actions caused by mouse wheel.
         * That might be ugly, but we handle scrolls somehow
         * anyway, so don't bother here..
         */
        if (event.preventDefault)
            event.preventDefault();
        event.returnValue = false;
    }

    /** Initialization code.
     * If you use your own event management code, change it as required.
     */

    if (window.addEventListener) {
        /** DOMMouseScroll is for mozilla. */
        window.addEventListener('DOMMouseScroll', wheel, false);
    }
    /** IE/Opera. */
    window.onmousewheel = document.onmousewheel = wheel;

    /** This is high-level function.
     * It must react to delta being more/less than zero.
     */
    var handle = function(delta) {
        var random_num = Math.floor((Math.random() * 100) + 50);
        if (delta < 0) {
            // alert("鼠标滑轮向下滚动:" + delta + "次!"); // 1
            $("#mScroll").val("鼠标滑轮向下滚动:" + delta + "次!");
            return;
        } else {
            // alert("鼠标滑轮向上滚动:" + delta + "次!"); // -1
            $("#mScroll").val("鼠标滑轮向上滚动:" + delta + "次!");
            return;
        }
    }
})


所有文章未经授权禁止转载、摘编、复制或建立镜像,违规转载法律必究。

举报邮箱:doramart@qq.com

相关标签: jquery 前端开发
取消回复
登录 参与评论

评论列表(