即使在 stopPropagation 之后，嵌套元素也会触发父事件

Question

我有一个包含图像（子）和跨度（子）的锚标记（父）。有一个下拉列表 div，我想在用户 mouseover 上锚标签时显示它。

当用户鼠标第二次悬停在该锚标记上时，该下拉菜单应该隐藏。

我在锚标记上添加了 mouseover 事件到 toggle 下拉菜单。但它不起作用。我什至在子元素上添加了 stopPropogation()。

当我 mouseover 在锚标签上时，显示下拉菜单。但是如果我将鼠标移到 span 或 div 上，下拉菜单会隐藏。

这是工作 JSfiddle

这是HTML：

<a href="#header-cart" id="custom_headercart" class="skip-link skip-cart" style="border: 1px solid black">    
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRTClkntD56hOwVYr-e1blK4kXVusYujzM-ErrlL6QhonsYjqdK" alt="" width=18>
    <span>12</span>
 </a>

<div id="dropdown_div" style="display: none">
    Dropdown div content
</div>

这是jQuery

$("#custom_headercart").on("mouseover", function(){
    $("#dropdown_div").toggle();
})

$j("#custom_headercart span").mouseover(function(event){
 event.stopPropagation();
});

$j("#custom_headercart img").mouseover(function(event){
 event.stopPropagation();
});

编辑： 下拉菜单应显示和隐藏备用 mouseover。就像我第一次 mouseover 一样，它应该显示下拉菜单。然后，如果我移出（下拉菜单不应该隐藏）并再次 mouseover，那么它应该隐藏。

Answer 1

您正在将停止传播应用于父级，将其应用于子级，因为它可以防止“event bubbling”而不是“Event capturing”

Answer 2

听起来您只需要使用 mouseenter 而不是 mouseover。这样你就不需要阻止子元素传播。

即使在 stopPropagation 之后，嵌套元素也会触发父事件

Nested elements firing parent's event even after stopPropagation

javascript

jquery

html

css

mouseover

Here's a fiddle