单击事件始终在父元素上触发，尽管在子元素上调用了 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

它是关于事件被调用的顺序以及在处理程序中发生的操作。onMouseDown事件：事件被#panel消费和取消。#helper变为活动状态onMouseUp事件：事件由#helper消费和取消。#helper变为非活动状态onClick事件：来自&nbsp;MDN：当指针位于元素内部时，同时按下和释放指向设备按钮（如鼠标的主鼠标按钮）时，元素会收到单击事件。如果在释放按钮之前在一个元素上按下按钮，并且指针移动到元素外部，则会在包含这两个元素的最具体的祖先元素上触发该事件。（强调我的）在这种情况下，最具体的祖先元素将是#bg，因此它处理单击事件。要获得您可能正在寻找的效果，只需将#helper元素的激活移动到处理程序onMouseUpPanel

Answer 2

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