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

EN

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

#parentDiv * {
    pointer-events: none
}

请注意*，它声明规则适用于parentDiv的所有子对象。

• 阻止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意味着停止接收event.
• second参数(useCapture)的层次结构中的下一个是一个标志，并且意味着颠倒接收事件的顺序。(使用capture阶段而不是bubble阶段。)这意味着如果您将其设置为true，那么父级将接收到单击事件，然后是子级。(通常情况下，孩子将首先获得事件。)

(详细解释请参见@Makyen的答案。)

为了让生活变得简单和容易，我在这里

在父节点上使用，如下所示

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

这将启用父子祖先关系，并且将为父和子调用相同的事件。

若要使事件仅为父级调用，请在事件处理程序中使用以下代码片段。第一行

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