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

Question

我有一个div，里面有一个p。该段落在视觉上位于 div 上方。我的事件处理程序受到该段落的影响。

这是我的事件处理程序:

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

因此，当我在 div 上移动鼠标时，如果我跨过段落，它将切换类。我想要的是只有在进入/离开 div 后才切换类(class)。我也尝试过使用这个:

$("#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 时才会触发。