尽管在子元素上调用了stopPropation()，但点击事件总是在父元素上发生。

Question

我有一个看似微不足道的问题，却找不到原因。有一个最小的html结构，#helper元素有display:none，在#panel的mousedown事件中，我在#helper上设置了dipslay:block。

<div id="bg">
  <div id="panel"></div>
  <div id="helper"></div>
</div>

元素#helper有display:none，在#panel的mousedown事件中，我在#helper上设置了dipslay:block。

这个问题可以简单的描述为：当我在元素#panel里面点击时，点击事件总是在元素#bg上发生，尽管我一直在努力阻止#panel和#helper上的事件处理程序的事件传播。我做了一个codepen来说明这个问题。

当我在#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

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

onMouseDown 事件。
- 事件被#panel消耗& 取消。
- #helper变得活跃
onMouseUp 事件。
- 事件被#helper消耗& 取消。
- #helper变得不活跃
onClick 事件。
- 来自 MDN:
  
  当指向设备按钮（如鼠标的主按钮）被点击时，元素会收到一个点击事件。当指针位于元素内部时，同时按下和松开这两个按钮。. 如果按钮被按在一个元素上，而指针在释放按钮之前被移到元素之外，那么事件就会在包含两个元素的最特定的祖先元素上发生。 (强调是我的)

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

要得到你可能想要的效果，只需将#helper元素的激活移动到 onMouseUpPanel 处理者

Answer 2

因为你的 onMouseDownPanel 功能使 <div id="helper"> 作为显示块，当你松开鼠标按钮时，因为助手是可见的，由于定位的原因，它正在触发 onMouseUpHelper 最后，由于他们都是BG的孩子，它称之为 在点击时