嵌套div元素onclick触发全部事件，如何仅触发对应元素事件？

问题原因 #

你遇到的是浏览器的事件冒泡机制：当点击嵌套结构里的内层元素时，事件会从触发点向上传播，依次触发所有父元素的同名事件，所以点击最内层Div时，三个alert都会弹出。

原代码：

<div onclick=alert("First div")>
    <div onclick=alert("Second div")>
        <div onclick=alert("Third div")>
        </div>
    </div>
</div>

可行解决方案 #

方案1：阻止事件冒泡 #

在每个Div的onclick事件中调用event.stopPropagation()，直接中断事件向上传播的路径：

<div onclick="alert('First div'); event.stopPropagation()">
    <div onclick="alert('Second div'); event.stopPropagation()">
        <div onclick="alert('Third div'); event.stopPropagation()">
        </div>
    </div>
</div>

点击任意Div时，只会触发当前元素的提示，事件不会再传递给父元素。

方案2：判断触发元素 #

如果需要保留冒泡逻辑（比如外层还有其他业务要执行），可以在事件中判断触发事件的是否为元素本身：

<div onclick="if(event.target === this) alert('First div')">
    <div onclick="if(event.target === this) alert('Second div')">
        <div onclick="alert('Third div')">
        </div>
    </div>
</div>

只有当点击的是Div本身（而非其子元素）时，才会弹出对应的提示。

方案3：事件委托（更简洁的写法） #

如果嵌套层级多，逐个绑定事件太繁琐，可以给最外层元素绑定一个事件，通过event.target定位触发元素：

<div id="container">
    <div data-content="First div">
        <div data-content="Second div">
            <div data-content="Third div">
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('container').addEventListener('click', function(e) {
    const target = e.target;
    if (target.dataset.content) {
        alert(target.dataset.content);
    }
});
</script>

通过自定义属性data-content存储提示文本，点击时直接读取对应内容，既减少了事件绑定数量，也避免了冒泡干扰。

内容的提问来源于stack exchange，提问作者Keshav Shiyal