如何仅在子 div 元素中而不在父 div 中触发 onclick 事件？答案

【问题标题】：How to trigger onclick event only in the child div element but not in the parent div?如何仅在子 div 元素中而不在父 div 中触发 onclick 事件？
【发布时间】：2020-03-25 06:56:52
【问题描述】：

我有一个 div 元素（父元素）(DIV1)，它会在触发 onclick 事件时打印其名称。
DIV1 有一个子 div 元素 (DIV2)，它应该在触发 onclick 事件时打印其名称。
我也应用了 onclick on window。

但是当我点击 DIV2 时，它会触发 DIV1 的 onclick 事件，所以它会打印父 div(DIV1) 的名称而不是 DIV2。

那么我如何确保当我点击 DIV1 时它应该触发 DIV1 onlick 并且当我点击 DIV2 时它应该触发 DIV2 onclick？

【问题讨论】：

请通读help center，尤其是How do I ask a good question? 你最好的办法是做你的研究，search 以获取有关 SO 的相关主题，然后试一试。如果您在进行更多研究和搜索后遇到困难并且无法摆脱困境，请发布您的尝试minimal reproducible example，并具体说明您卡在哪里。人们会很乐意提供帮助。
捕获对 DIV2 的点击，并防止传播。见w3.org/TR/DOM-Level-3-Events/#event-flow
看你是怎么写html代码的，两个div应该有区别，否则dom很难点击哪个div
提问时请提供代码，至少您可以提供div排列的图像以更清晰。

标签： javascript html typescript event-handling dom-events

【解决方案1】：

使用event.stopPropagation()停止div2的点击事件传播到div1

const clickHandler = (e,str) => {
e.stopPropagation()
console.log(str)
}

document.getElementById('div1').addEventListener('click',e=>clickHandler(e,'div1'))
document.getElementById('div2').addEventListener('click',e=>clickHandler(e,'div2'))

<div id="div1">
div 1
  <div id="div2">
div 2
  </div>
</div>

【讨论】：