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

Question

child 和 parent 都是可点击的（child 可以是带有 jQ​​uery 点击事件的链接或 div）。当我点击子事件时，如何只触发父点击事件而不触发子事件？

Answer 1

DOM 事件阶段

事件分为三个阶段：

1. 捕获：第一阶段是“捕获”，其中事件处理程序从<window> 开始被调用，并通过后代向下移动到事件的目标。
2. 目标：第二个阶段是调用目标上的事件监听器的“目标”阶段。
3. 冒泡：第三阶段是“冒泡”，首先是侦听目标的父级的处理程序首先被调用，然后逐步调用该元素的祖先。

事件还有一个“默认操作”，它发生在冒泡阶段之后。默认操作是浏览器定义的操作，该操作通常发生在作为事件目标的元素种类上的指定类型的事件上（例如，浏览器在<a> 上导航到<a> 上的click ，而在另一种类型的元素上的click 将具有不同的默认操作）。

DOM Level 3 Events draft 有一个图表，以图形方式显示事件如何通过 DOM 传播：

^{图片版权所有 © 2016 World Wide Web Consortium，（MIT，ERCIM，Keio，Beihang）。 http://www.w3.org/Consortium/Legal/2015/doc-license（the license 允许使用）}

有关捕获和冒泡的更多信息，请参阅：“What is event bubbling and capturing?”； DOM Level 3 Events draft;或W3C DOM4: Events

防止事件影响孩子

对于您想要的，要在父级之前获取事件并阻止子级事件，您必须在捕获阶段接收事件。一旦在捕获阶段收到它，您必须阻止事件传播到 DOM 树中较低元素上的任何事件处理程序，或者已注册在冒泡阶段侦听的元素（即元素/阶段上的所有侦听器）在您的听众之后被事件访问）。你可以通过调用event.stopPropagation()来做到这一点。

在捕获阶段接收事件

使用addEventListener(type, listener[, useCapture]) 添加监听器时，您可以将useCapture 参数设为true。

引用 MDN：

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

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

• event.preventDefault() 用于阻止默认操作（例如，阻止浏览器在click 上导航到<a> 的href）。 [这在下面的示例中使用，但没有实际效果，因为文本没有默认操作。之所以在这里使用它，是因为大多数情况下，当您添加单击事件处理程序时，您希望阻止默认操作。因此，养成这样做的习惯是个好主意，而当您知道自己不想这样做时就不要这样做。]
• event.stopPropagation() 用于防止任何事件阶段后期元素上的任何处理程序接收事件。它不会阻止调用当前元素和阶段上的任何其他处理程序。它不会阻止默认操作的发生。
• event.stopImmediatePropagation()：相同元素和阶段的处理程序按添加顺序调用。除了具有与event.stopPropagation() 相同的效果之外，event.stopImmediatePropagation() 还防止任何其他处理程序在同一元素和事件阶段接收事件。它不会阻止默认操作的发生。鉴于这个问题的要求是防止事件传播给孩子，我们不需要使用它，但可以这样做而不是使用event.stopPropagation()。但是请注意，同一元素上的侦听器是按照它们添加的顺序调用的。因此，event.stopImmediatePropagation() 不会阻止在与您的侦听器相同的元素和阶段上的那些侦听器接收事件，这些侦听器是在您的侦听器之前添加的。

示例

在下面的示例中，事件侦听器被放置在父元素和子 <div> 元素上。只有放置在父级上的侦听器接收事件，因为它在子级之前的捕获阶段接收事件并执行event.stopPropagation()。

var parent=document.getElementById('parent');
var child=document.getElementById('child');
var preventChild=document.getElementById('preventChild');

parent.addEventListener('click',function(event){
    if(preventChild.checked) {
        event.stopPropagation();
    }
    event.preventDefault();
    var targetText;
    if(event.target === parent) {
        targetText='parent';
    }
    if(event.target === child) {
        targetText='child';
    }
    console.log('Click Detected in parent on ' + targetText);
},true);
                      
child.addEventListener('click',function(event){
    console.log('Click Detected in child (bubbling phase)');
});

child.addEventListener('click',function(event){
    console.log('Click Detected in child (capture phase)');
},true);

<input id="preventChild" type="checkbox" checked>Prevent child from getting event</input>
<div id="parent">Parent Text<br/>
  <div id="child" style="margin-left:10px;">Child Text<br/>
  </div>
</div>

jQuery

​​>

jQuery 不支持对事件使用捕获。有关原因的更多信息，请参阅：“Why does jQuery event model does not support event Capture and just supports event bubbling”

Answer 2

当您知道没有任何子元素是交互式的时，在某些情况下可能有用的另一个选项是在您的 css (link) 中设置 pointer-events: none。我通常将它应用于要捕获交互的元素的所有子元素。像这样：

#parentDiv * {
    pointer-events: none
}

注意*，声明该规则适用于parentDiv 的所有子代。

Answer 3

• 阻止children接收父级的点击事件：

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

（注意第二个参数是true）

• 防止parent 接收自身或其子级的点击事件：

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

• e.stopPropagation 表示停止层次结构中的下一个接收事件。
• 第二个参数（useCapture）是一个标志，表示颠倒接收事件的顺序。 （使用capture 阶段而不是bubble 阶段。）。 这意味着如果您将其设置为 true，则父级将收到点击事件，然后是子级。 （通常孩子会先得到事件。）

（有关详细说明，请参阅@Makyen 的答案。）

Answer 4

为了让生活变得真正简单和轻松，我在这里
在类似于此的父节点上使用

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

这将启用父子祖先关系，并且将为父子节点调用相同的事件。
要使事件仅被父级调用，请在事件处理程序中使用以下代码 sn-p。第一行

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

Answer 5

您可以在元素上使用 CustomEvents 属性。

• 创建一个事件对象，让子元素将事件分派给它的父元素

在这里查看演示

document.getElementById('parent').onclick = function() {
  alert("you are clicking on the parent stop it");
}
document.getElementById('child').onclick = function(e) {
  alert('I am sending this event to my parent');
  event = new CustomEvent('click');
  document.getElementById('parent').dispatchEvent(event);

}

#parent {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: solid black;
}

#child {
  border: solid red;
}

<div id=parent>
  <div id=child>I am a child</div>
</div>