javascript - 如何检查鼠标何时不在任何子元素中？

Question

这是一个非常新手的问题（我很生气我无法解决它）。我有一个问题，因为我每次鼠标离开容器时都会触发一个动作，现在问题是我有子元素，并且由于某种原因，当我移过一个子元素时，我的动作被触发了。

我基本上有这样的东西

<li>
<image>
<div>content</div>
</li>

我想当我进入我的 li 时，它处于活动状态，当我离开它时，它变得不活动，但我可以进入并悬停在我的内容上，知道该怎么做吗？

谢谢

score 2 · Accepted Answer

我个人采取了懒惰的方式并使用jQuery的悬停方法来一次设置它们，而不是分别使用mousein和mouseout。这让 jQuery 可以处理进出的孩子，例如：

jQuery("li").hover(function() {
  //mousein actions
 },
 function() {
  //mouseout actions
 }
);

score 1 · Accepted Answer

为了防止在子元素悬停时发生任何事情，只需检查目标是否实际上是绑定元素：

$('li').on('mouseenter mouseleave', function(e) {
    if ( e.target === this ) {
        // do stuff here
    }
});

2 回答 2