Question

我有一个外部div，里面有一个内部div（实际上是其父级的1/4）。最初，内部div位于左上角。我正在做的是，当外部div获得mouseenter事件时，内部div将移至左下角，而当外部div获得mouseleave事件时，内部div将等待1第二秒钟，它将移回其原始位置。通常我的代码可以正常工作。但有一种特殊情况，例如，我将鼠标悬停在外部div上，然后在不到一秒钟的时间内将鼠标悬停并再次向后悬停。对于这种情况，我将在mouseleave事件开始时使用.off()方法取消mouseenter事件。但它不起作用。

var inner = document.getElementById("inner");
var outer = document.getElementById("outer");
$(outer).on('mouseenter', () => {
        $(this).off('mouseleave');
        $(inner).css("transform", "translateY(0)");
    });

    $(outer).on('mouseleave', () => {
        $(this).delay(1000).queue((next) => {
            $(inner).css("transform", "translateY(100%)");
            next();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer" style = "width: 100px; height: 100px; position: fixed; background-color: blue; border: 1px solid black;">
    <div id="inner" style = "width: 50px; height: 50px; position: fixed; background-color: yellow; transition: all 0.5s;"></div>
</div>

Answer 1

在您致电off()时，该事件已经被触发并且正在被延迟。相反，您需要使用dequeue()方法删除排队的动画。

var inner = document.getElementById("inner");
var outer = document.getElementById("outer");
$(outer).on('mouseenter', () => {
        $(this).dequeue();
        $(inner).css("transform", "translateY(0)");
    });

    $(outer).on('mouseleave', () => {
        $(this).delay(1000).queue((next) => {
            $(inner).css("transform", "translateY(100%)");
            next();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer" style = "width: 100px; height: 100px; position: fixed; background-color: blue; border: 1px solid black;">
    <div id="inner" style = "width: 50px; height: 50px; position: fixed; background-color: yellow; transition: all 0.5s;"></div>
</div>

jQuery的删除事件监听器无法正常工作

1 个答案: