jquery删除事件侦听器不能正常工作
jquery删除事件侦听器不能正常工作
提问于 2018-09-30 06:12:46
我有一个外部div，里面有一个内部div (实际上是其父div的1/4 )。最初，内部div位于左上角。我正在做的是，当外部div获得mouseenter事件时，内部div将移动到左下角，而当外部div获得mouseleave事件时，内部div将等待1秒，然后它将移动回其原始位置。正常情况下，我的代码可以正常工作。但有一种特殊的情况，例如，我将鼠标悬停在外部div上，然后在不到一秒的时间内，我再次悬停在它的背面。对于这种情况，我在mouseenter事件的开头取消了带有.off()方法的mouseleave事件。但它不起作用。
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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-30 06:28:26
当您调用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52572974
复制相关文章
相似问题