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

澄清为什么不重复什么是事件冒泡和捕获？ ：

我理解事件冒泡和捕获与“为什么”相关，但只是声明它是事件冒泡或捕获不能解释方案。 它没有解释为什么子元素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> 

编辑：评论问为什么当你点击并拖动到下一个孩子显示“父” - 这是事件冒泡。 你需要使用event.stopPropagation()来阻止它。

Answer 2

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