javascript - 为什么单击和拖动会导致父元素成为 `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)
})

为什么拖动 Action 导致事件目标成为第一个示例中的父元素？

http://jsfiddle.net/thz1esfc/

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

我理解事件冒泡和捕获与“为什么”相关，但仅仅说明它是事件冒泡或捕获并不能解释这种情况。它没有解释为什么子元素 A 上的 mousedown 和子元素 B 上的 mouseup 会导致父元素成为 event.target 而不是点击开始的子元素 A 或点击开始的子元素 B已发布。

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

Technically, browser register the CLICK on the parent b/c neither 1st or 2nd does not register complete CLICK (meaning mousedown and mouseup)

It's up to the browser to handle that behavior. On Firefox at least, the click event is lost when you click in one box, and drag to a different box and release.

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>

编辑:评论询问为什么当您单击并拖动到下一个 child 以显示“ parent ”时 - 这是事件冒泡。您需要使用 event.stopPropagation() 来停止它。