欢迎您访问宜州一中 您可以登录 或注册
 
收藏本站 简繁转换
一方天地育桃李,三尺讲台竞风采             宜州区一中在宜州博物馆举行“人杰地灵读宜州”故事分享会             宜州一中举行2024届中考百日誓师大会             龙腾启新 筑梦未来 ——宜州区第一中学欢庆2024年元旦文艺晚会             走进嘉联丝厂 畅享研学之乐 ——宜州区第一中学开展研学实践活动             2023年河池市宜州区第一中学/宜州区红卫学校家庭经济困难大学新生入学资助项目发放名册(第二批)             展科技志向,圆飞行梦想 ——宜州区一中2025届举行无人机大赛             2023年河池市宜州区第一中学\红卫学校 家庭经济困难大学新生入学资助项目发放名册(第一批)             法制进校园 以法促成长 ——宜州一中举行“三姐护蕾”法治进校园活动             “英”你精彩,“语”你同行 —— 我校2025届举行英文风采大赛            

DoraCMS

您现在的位置是:首页>文档内容页

文档详情

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

doramart 2024-05-03 11:57:51 初中部风采235719
今天尝试写基于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;
        }
    }
})


文章评论

取消回复
登录 参与评论

评论列表(