单击事件始终在父元素上触发，尽管在子元素上调用了 stopPropation（）

Question

我有一个看似微不足道的问题，但找不到原因。有一个最小的html结构：<div id="bg">  <div id="panel"></div>  <div id="helper"></div></div>元素#helper具有 display：none，在 #panel 上的 mousedown 事件中，我在 #helper 上设置了 dipslay：block。这个问题可以像这样简要描述：当我单击元素#panel内部时，单击事件总是在元素#bg上触发，尽管所有努力停止#panel上的事件处理程序上的事件传播，#helper。我做了一个密码笔来说明这个问题：https://codepen.io/tony124/pen/LYpQzwx?editors=1111当我在#panel之外单击时，我进入控制台："onMouseDownBg" "bg" "bg""onMouseUpBg" "bg" "bg""onClickBg" "bg" "bg"这是意料之中的。但是，当我点击#panel时，我得到"onMouseDownPanel (stop)" "panel" "panel""onMouseUpHelper (stop)" "helper" "helper""onClickBg" "bg" "bg"我不明白为什么。甚至没有来自onMouseDownBg和noMouseUpBg的日志记录。点击事件是如何触发的？

Answer 1

它是关于事件被调用的顺序以及在处理程序中发生的操作。

1. onMouseDown事件：

• 事件被#panel消费和取消。

• #helper变为活动状态

2. onMouseUp事件：

• 事件由#helper消费和取消。

• #helper变为非活动状态

3. onClick事件：

• 来自 MDN：

  当指针位于元素内部时，同时按下和释放指向设备按钮（如鼠标的主鼠标按钮）时，元素会收到单击事件。如果在释放按钮之前在一个元素上按下按钮，并且指针移动到元素外部，则会在包含这两个元素的最具体的祖先元素上触发该事件。（强调我的）

在这种情况下，最具体的祖先元素将是#bg，因此它处理单击事件。

---

要获得您可能正在寻找的效果，只需将#helper元素的激活移动到处理程序onMouseUpPanel

Answer 2

因为你的onMouseDownPanel功能作为显示块，当你释放鼠标按钮，因为助手是可见的，由于定位，它触发了mouseUpHelper，最后，因为它们都是bg的子级，它调用clickBg<div id="helper">