嵌套div元素onclick调用所有div的click事件

Question

我的html代码如下；

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

问题是当单击最里面的 div 时，所有三个警报消息都会显示。

如何修改代码，以便只显示与 div 标签对应的 1 条警报消息。

Answer 1

您可以通过单击最里面的 div 时停止事件传播来实现此目的。这样，点击事件就不会冒泡到父级div。

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