如何防止重叠元素的冒泡事件？答案

【问题标题】：how to prevent bubbling event for overlapping elements?如何防止重叠元素的冒泡事件？
【发布时间】：2023-03-24 00:41:01
【问题描述】：

我需要一个线索，当我将鼠标指针移到它上面时，如何停止#bubble 闪烁，这两个元素相互放置，画布的 onMouseMove 显然会干扰它，我使用 Chrome 进行测试。

<p id="bubble" onclick="noBubble();"></p>
<canvas id="kogal" width="450" height="630" onmousedown="onMouseDownkogal(this, event);" onmousemove="onMouseMoveKogal(this, event);" onmouseup="onMouseUpKogal();" onmouseout="onMouseOutKogal();">

只有当鼠标指针在#bubble上方时，是否可以停止画布的onMouseMove？我尝试了 preventDefault 并在几种组合中返回 false 无济于事，谢谢您的任何提示。 ^_^

【问题讨论】：

由于元素是兄弟元素，p 元素上的事件不会触发canvas 元素上的事件，反之亦然。如果您超过了p 元素，则不应在canvas 元素上触发mousemove。证明：jsfiddle.net/2z2rbzzj。或者p 元素可能不在canvas 之上？
我不确定我是否理解你的问题，但通常你可以通过写“return false”或者如果你使用jquery来停止冒泡效果：event.stopPropagation()

标签： javascript

【解决方案1】：

event.preventDefault() 只是防止发生默认事件行为，例如在提交表单时重新加载页面。你想要的是event.stopPropagation()，它将防止事件冒泡到容器元素中。

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation

【讨论】：