在#main-child-element

Question

我的mouseenter div上有#main个事件：

main.addEventListener("mouseenter", function(event) {
    console.log("mouseenter main");
    textElement.style.visibility = "visible";
});

在#main内我有一个#element孩子也附加到mouseenter事件：

element.addEventListener("mouseenter", function(event) {
    console.log("mouseenter on element but dont trigger main mouseenter");
});

mouseenter #element mouseenter如果没有触发来自#main的{​​{1}}事件？目前当悬停#element时，两个mouseenter事件都会被触发

小提琴：http://jsfiddle.net/md3jmxeL/

例如我在mouseenter #main上显示一个蓝色方框 - 我不想在mouseenter上执行#element时触发/显示此蓝框p>

Answer 1

您可以使用mouseover事件处理程序，此处调整示例：http://jsfiddle.net/md3jmxeL/2/

main.addEventListener("mouseover", function(event) {
    console.log("mouseenter main");
    textElement.style.visibility = "visible";
});

只需将所有mouseenter更改为mouseover。这些事件仅在事件冒泡的情况下有所不同 - 这是您的情况。在此处阅读更多相关信息：http://www.mkyong.com/jquery/different-between-mouseover-and-mouseenter-in-jquery/

Answer 2

mouseenter event被发送到层次结构中的每个元素，这与鼠标悬停不同，鼠标悬停有一个事件在层次结构中向上传播。

因此，你不能在子mouseenter事件上停止传播，因为事件不会冒泡，因为每个元素都有自己的事件调用。

您可以在孩子的事件中使用mouseover和stopPropagation：

main.addEventListener("mouseover", function(event) { /*...*/ });

element.addEventListener("mouseover", function(event) {
    event.stopPropagation();
    event.preventDefault();
    /*...*/
});

但是，每当用户向后移动时，你将获得一个鼠标悬停事件，从父元素向子元素移动到第四个。

可能更好的选择是在父元素上使用一个事件并检查event.target以查看触发事件的元素。如果它是您的子元素，那么就开始工作

main.addEventListener("mouseenter", function(event) {
    if(event.target == document.getElementById("element")){
        //do work
    }
});

Answer 3

此解决方案是您需要为mouseenter添加事件侦听器（并且它还可以与mouseover一起使用）并有效地屏蔽给定事件的子元素。

方法：在外部mouseenter事件侦听器中，使用document.querySelectorAll(":hover")查找鼠标当前所有的元素。如果这些元素的id与掩蔽子元素id匹配，则返回并且不再进一步处理父mouseenter逻辑。如果孩子为同一事件附加了一个事件监听器，它仍然会被触发。

示例：

main.addEventListener("mouseenter", function(event) {

    // Child element masking code block    
    var elems = document.querySelectorAll( ":hover" );
    for (var i = 0; i < elems.length; ++i) {
        // Prevent parent event logic from executing if on specified child
        if(elems[i].id === "element") {
            return;
        }
    }

    // The rest of your code
    console.log("mouseenter main");
    textElement.style.visibility = "visible";
});

demo