分离并重新附加鼠标滚轮事件侦听器不会重置滚动惯性

Detach and re-attach mousewheel event listener don't reset scroll inertia

本文关键字：侦听器 滚动 事件 新附加 鼠标 分离      更新时间：2023-09-26

我正在使用jquery-mousewheel插件来触发一个函数。

当我调用 moveit 时，我会分离侦听器并等待动画完成，然后重新附加侦听器。

问题是当我重新连接它时，鼠标滚轮插件仍然在监听某些鼠标/触控板的惯性，并反复调用 moveit。

我想在我的特定情况下，去抖动或限制函数调用不是好的解决方案，因为惯性仍然存在，并且我还希望立即附加侦听器以进行其他可能的 moveit 调用。

有没有办法通过完全重置鼠标滚轮事件而不是仅仅分离它来"杀死惯性"？

$(document).ready(function () {
    var tween;
    var slide = $('#slide');
    function bodyListen () {
        $('body').on('mousewheel.bodyscroll',
        function (e, delta, deltaX, deltaY) {
            e.preventDefault();
            $('body').off('mousewheel.bodyscroll');
            moveit();
        });
    }
    function moveit () {
        tween = TweenMax.to(slide, 0.8, {
            marginLeft: 300,
            onComplete: bodyListen
        });
    }
    bodyListen();
});

在处理事件（或与 DOM 相关的任何操作）时使用标志，因为事件侦听器通常可以像异步函数一样运行。

$(document).ready(function () {
    var tween;
    var slide = $('#slide');
    var flag = true;
    function bodyListen () {
        $('body').on('mousewheel.bodyscroll',
        function (e, delta, deltaX, deltaY) {
            if(flag){
                e.preventDefault();
                flag = false;
                moveit();
            }
        });
    }
    function moveit () {
        tween = TweenMax.to(slide, 0.8, {
            marginLeft: 300,
            onComplete: function(){
                flag = true;
            }
        });
    }
    bodyListen();
});

虽然我自己没有尝试过，但 TweenMax 有 杀死补间 和 杀死所有 允许您杀死补间并选择性地在你这样做之前完成它们。 也许不是你想要的，因为它会强制动画完成，但它会让你回到你想要的状态，并且代码插入很简单。在函数体的开头听

function bodyListen() {
    if(tween) tween.killAll(true)
    .....
相关文章：