如何实现mouseover事件仅从外部进入父div时触发，而非从子元素返回时？

你现在的问题是鼠标从父div移到子段落再返回时，会重复触发mouseover事件，要实现只有从页面外部（非当前div及其子元素）进入div时才触发样式变化，用JS可以通过事件对象的relatedTarget属性来判断鼠标的来源/去向。

核心思路：

• 触发mouseover时，判断鼠标是不是从当前div的子元素或自身过来的，如果是就跳过样式修改；只有从外部进入才执行。
• 触发mouseout时，判断鼠标是不是移到当前div的子元素里了，如果是就不恢复样式；只有移到外部才恢复。

修改后的完整代码如下：

<style>
    div, p {
        margin: 8px;
        padding: 8px;
        display: inline-block;
        border: 1px dashed grey;
    }
</style>
<div>
    <p></p>
    <p></p>
    <p></p>
</div>

<div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

<script>
    let rootDivs = document.querySelectorAll("body > div");
    for (let rootDiv of rootDivs) {
        rootDiv.addEventListener("mouseover", function(event) {
            // 只有当鼠标从外部进入（不是从当前div的子元素/自身过来）时才触发
            if (!rootDiv.contains(event.relatedTarget)) {
                rootDiv.style.borderColor = "green";
                rootDiv.style.borderStyle = "solid";
            }
        });

        rootDiv.addEventListener("mouseout", function(event) {
            // 只有当鼠标移到外部（不是进入当前div的子元素）时才恢复样式
            if (!rootDiv.contains(event.relatedTarget)) {
                rootDiv.style.borderColor = "grey";
                rootDiv.style.borderStyle = "dashed";
            }
        });
    }
</script>

关键代码解释：

• rootDiv.contains(event.relatedTarget)：判断relatedTarget（鼠标进入/离开前所在的元素）是不是当前div的后代元素或自身。
• mouseover时，当relatedTarget不在当前div的范围内，说明是从外部进入，才执行样式修改。
• mouseout时，当relatedTarget不在当前div的范围内，说明是移到了外部，才恢复样式。

这样就能避免鼠标在父元素和子元素之间切换时反复触发事件的问题。

内容的提问来源于stack exchange，提问作者SSMSJM