Javascript 如何在单击子项时仅触发父项单击事件

子级和父级都可以单击（子级可以是带有jQuery单击事件的链接或div）。当我单击子对象时，如何仅触发父对象单击事件而不触发子对象事件？

DOM事件阶段 活动分为三个阶段：

捕获：第一个阶段是“捕获”，从

开始调用事件处理程序，然后通过子体向下移动到事件目标

Target:调用目标上的事件侦听器时，第二个阶段是“目标”阶段

冒泡：第三个阶段是“冒泡”，首先是侦听目标父级的处理程序，然后逐步调用该元素的祖先

事件还有一个“默认操作”，它发生在冒泡阶段之后。默认操作是浏览器定义的操作，通常针对作为事件目标的元素类型的指定类型的事件发生（例如，导航到

的
href
的浏览器有一个图表，以图形方式显示事件如何通过DOM传播：



图像版权所有©2016，（，，）（根据允许使用）

有关捕获和冒泡的详细信息，请参阅：“；或”

防止事件影响到孩子
为了满足您的需要，要在子事件之前获取父事件并防止子事件，您必须在捕获阶段接收该事件。一旦在捕获阶段接收到该事件，您必须停止该事件传播到DOM树中较低的元素上的任何事件处理程序，或已注册为侦听bubbli的元素上的任何事件处理程序ng阶段（即事件在侦听器之后将访问的元素/阶段上的所有侦听器）。您可以通过调用来完成此操作

在捕获阶段接收事件
使用添加侦听器时，可以将
useCapture
参数设置为
true

引用MDN：

[
useCapture
is]一个布尔值，指示此类型的事件将被分派到注册的侦听器，然后再分派到DOM树中其下的任何EventTarget。通过树向上冒泡的事件不会触发指定使用捕获的侦听器。事件冒泡和捕获是传播eve的两种方式嵌套在另一个元素中的元素中的nts，当两个元素都为该事件注册了句柄时。事件传播模式确定元素接收事件的顺序。有关详细说明，请参阅DOM级别3事件和JavaScript事件顺序。如果未指定，则
useCapture
默认为false

防止其他处理程序获取事件

用于防止默认操作（例如，阻止浏览器导航到
的
href
，用于阻止任何事件阶段中后期元素上的任何处理程序接收事件。它不阻止调用当前元素和阶段上的任何其他处理程序。它不阻止发生默认操作

：按添加顺序调用同一元素和阶段上的处理程序。除了具有与
event.stopPropagation（）
，
event.stoppimediatepropagation（）相同的效果之外
阻止同一元素和事件阶段上的任何其他处理程序接收事件。它不会阻止默认操作的发生。鉴于此问题的要求是防止事件传播到子级，我们不需要使用此选项，但可以使用此选项而不是使用
event.stopPropagation（）
。但是，请注意，同一元素上的侦听器是按添加顺序调用的。因此，
event.stopImmediatePropagation（）
不会阻止与侦听器之前添加的侦听器位于同一元素和阶段的侦听器接收事件

例子
在以下示例中，事件侦听器放置在父元素和子元素
上。只有放置在父元素上的侦听器接收事件，因为它在子元素之前的捕获阶段接收事件，并执行
事件.stopPropagation（）


var parent=document.getElementById（'parent'）；
var child=document.getElementById（'child'）；
var preventChild=document.getElementById（'preventChild'）；
parent.addEventListener（'click'，函数（事件）{
如果（预防子项已选中）{
event.stopPropagation（）；
}
event.preventDefault（）；
var-targetText；
如果（event.target==父级）{
targetText='parent'；
}
if（event.target==子级）{
targetText='child'；
}
console.log（'在'+targetText'上的父级中检测到单击）；
}，对）；
addEventListener（'click'，函数（事件）{
log（'在子级中检测到单击（冒泡阶段）'；
});
addEventListener（'click'，函数（事件）{
console.log（'在子级中检测到单击（捕获阶段）'；
}，对）；
防止子级获取事件
父文本

子文本

您可以对元素使用CustomEvents属性


创建一个事件对象，并让子元素将事件分派给其父元素

请看这里的演示


document.getElementById（'parent'）。onclick=function（）{
警报（“您正在单击父项停止它”）；
}
document.getElementById（'child'）。onclick=function（e）{
警报（“我正在将此事件发送给我的父母”）；
事件=新自定义事件（“单击”）；
document.getElementById（'parent'）.dispatchEvent（事件）；
}
#父级{
显示：内联块；
宽度：100px；
高度：100px；
边框：纯黑；
}
#孩子{
边框：纯红；
}

我是一个孩子
这方面的另一个选项可能
#parentDiv * {
    pointer-events: none
}

target_image.addEventListener('drop',dropimage,true);

event.stopPropagation();
event.preventDefault();

parent.addEventListener('click',function(e){
  e.stopPropagation();
  console.log('event on parent!')
},true);

parent.addEventListener('click',function(e){
  e.stopPropagation();
  console.log('event on parent or childs!', e.target.closest('.parent_selector'))
});