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上并从子元素B上移出鼠标会导致父元素成为event.target而不是单击开始的子元素A或释放单击的子元素B。 >

这两个似乎试图解释结果，但我希望有一些文档尽可能显示这种行为。

从技术上讲，浏览器在父b / c上注册CLICK，第1个或第2个都不注册完整的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上，当您单击一个框并拖动到另一个框并释放时，单击事件会丢失。

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

2 个答案: