为什么单击和拖动会导致父元素成为`event.target`？

Question

在定期点击子 div 时，以下代码将打印被点击的特定子 div 的 ID。

<div id="parent">
  <div id="A" class="child"></div>
  <div id="B" class="child"></div>
</div>

<script>
  $("#parent").on('click', event => {
     $(event.target).text(event.target.id)
  })
</script>

但是，如果您单击一个子元素 div 并在另一个子元素 div 中拖动/释放，那么它将打印父元素的 ID。

当点击处理程序分配给子项时，不会发生这种情况。

$(".child").on('click', event => {
    $(event.target).text(event.target.id)
})

为什么在第一个例子中拖拽动作导致事件目标是父元素？

http://jsfiddle.net/thz1esfc/

澄清为什么不重复What is event bubbling and capturing?：

我了解事件冒泡和捕获与“为什么”相关，但仅说明它是事件冒泡或捕获并不能解释该场景。它没有解释为什么子元素 A 上的 mousedown 和子元素 B 上的 mouseup 会导致父元素成为 event.target 而不是单击开始的子元素 A 或释放单击的子元素 B。

这两个似乎试图解释结果，但如果可能的话，我想要一些显示这种行为的文档。

从技术上讲，浏览器在父 b/c 上注册 CLICK，第一次或第二次都不会注册完整的 CLICK（意味着 mousedown 和 mouseup）

由浏览器来处理该行为。至少在 Firefox 上，当您单击一个框并拖动到另一个框并释放时，单击事件会丢失。

Answer 1

这发生在您身上，因为从技术上讲，点击事件是在释放点击时触发的，而不是在实际点击本身时触发的。见：https://developer.mozilla.org/en-US/docs/Web/Events/click

你可以mousedown，效果会更准确：

$("#parent").on('mousedown', event => {
	$('#message').text(event.target.id)
})

#parent {
  width: 300px;
  height: 300px;
  background-color: cyan;
}

.child {
  height: 100px;
  width: 100px;
  background-color: grey;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="1" class="child">
  
  </div>
   <div id="2" class="child">
  
  </div>
</div>
<p id="message">
</p>

编辑：当您单击并拖动到下一个子项以显示“父项”时，cmets 询问为什么 - 这是事件冒泡。您需要使用 event.stopPropagation() 来阻止它。

Answer 2

由浏览器来处理该行为。至少在 Firefox 上，当您单击一个框并拖动到另一个框并释放时，单击事件会丢失。