javascript - 仅对父 div 元素调用一次 javascript 事件

Question

我正在尝试调用父 div 上的 onmouseout 事件。

尽管一旦光标移出父 div 就会调用函数 outofdiv。

但是当光标在不同的子 div 之间移动时，函数再次被调用，这是我不希望发生的情况

请建议仅使用javascript的任何方法

 <div id="maze"  onmouseout="outofdiv();">

            <div id="start" onClick="start();">S</div>
            <div class="boundary"></div>
            <div class="boundary"></div>
            <div class="boundary"></div>
            <div class="boundary"></div>
            <div class="boundary"></div>
            <div id="end" onClick="end();">E</div>
</div>


function outofdiv(){
alert("something")

Answer 1

这称为事件冒泡。 onmouseout 事件由子 div 元素触发，并通过其 DOM 层次结构向上冒泡，在本例中到达父 div 的onmouseout 事件处理程序。

您可以使用event.target和 event.currentTarget确定事件是否已冒泡。

放置

if (event.target!=event.currentTarget) return;

作为 outofdiv 函数的第一行。如果父 div 不是 onmouseout 事件的发起者，这会阻止函数继续。