div内的元素不应该干扰事件处理程序

Question

我有一个div并在其中我有一个p。该段在视觉上高于div。我的事件处理程序受到该段落的影响。

这是我的事件处理程序：

$("#container-map").on("mouseover mouseleave", ".ct-symbol", function() { 
    $(this).toggleClass("active-b"); 
}); 

所以，当我移动我的鼠标在DIV上，它会如果我过段切换类。我想要的只是当我进入/离开div时才切换课程。我还试图用这样的：

$("#container-map").on("mouseover mouseleave", ".ct-symbol", ".ct-symbol p" function() { 
    $(this).toggleClass("active-b"); 
}); 

但现在当我提出我的鼠标的段落上方触发两次......

Answer 1

$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() { 
    if (this.id == "container-map") 
    { 
     $(this).toggleClass("active-b"); 
    } 
}); 

这应该工作。它只会在this与div具有相同的id时触发。

Answer 2

你必须使用mouseenter没有mouseover

$("#container-map").on("mouseenter mouseleave", ".ct-symbol" function() { 
    $(this).toggleClass("active-b"); 
}); 

Answer 3

如果你想要的是，当你离开你的活跃-B类不仅影响/输入。

您需要使用鼠标中心而不是鼠标悬停。

$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() { 
    $(this).toggleClass("active-b"); 
});