鼠标滑动和触屏滑动的时候需要触发的事件

最新推荐文章于 2023-03-17 15:08:02 发布

打鼓的孩子很可爱

最新推荐文章于 2023-03-17 15:08:02 发布

阅读量865

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_40401500/article/details/98031116

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用JavaScript处理鼠标滚轮和触屏滑动事件，通过绑定事件监听器实现页面元素的动态响应，适用于需要交互反馈的网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 //鼠标事件，当鼠标滑动的时候，触发的事件
    windowAddMouseWheel();
    function windowAddMouseWheel() {
        var scrollFunc = function (e) {
            e = e || window.event;
               console.log("滚轮滑动")
                    $("#echart").css("padding-top", "0rem")
         
        };
        //给页面绑定滑轮滚动事件
        if (document.addEventListener) {
            document.addEventListener('DOMMouseScroll', scrollFunc, false);
        }
        //滚动滑轮触发scrollFunc方法
        window.onmousewheel = document.onmousewheel = scrollFunc;
    }
   
    // 触屏滑动事件
    $("body").on("touchstart", function (e) {
        e.preventDefault();
        startX = e.originalEvent.changedTouches[0].pageX,
            startY = e.originalEvent.changedTouches[0].pageY;
    });
    $("body").on("touchmove", function (e) {
        e.preventDefault();
        moveEndX = e.originalEvent.changedTouches[0].pageX,
            moveEndY = e.originalEvent.changedTouches[0].pageY,
            X = moveEndX - startX,
            Y = moveEndY - startY;
        console.log("触屏滑动")
        $("#echart").css("padding-top", "0rem")
    });