Question

我在链接中有一个链接，都有一个onClick事件。

外部链接按预期工作。但是，内部链接会触发onClick事件。我希望它能够在单击内部链接时触发外部事件。

<div onClick="console.log(1)">
   <a href="#" onClick="console.log(2)">Inner</a>
</div>

Answer 1

Javascript事件将通过树传播。

因此，当您单击内部锚点时，它还会为更高的元素发出任何点击事件，因此div元素。

要停止此操作，内部点击处理程序必须阻止事件与e.stopPropagation();一起传播。

但是，当您在JavaScript中未使用.addEventListener()注册处理程序时，这会变得有点混乱。

如果你以这种方式添加事件，你可以这样做（首先给你的锚一个id，比如说inner），这很好很容易：

document.getElementById('inner').addEventListener('click', function (e) {
    e.stopPropagation();
    console.log(2);
});

如果您确实希望使用该属性，则可以将事件传递给您的点击处理程序，因此：

<a href="#" onClick="innerHandler(event)">Inner</a>

//JS
function innerHandler(e) {
    e.stopPropagation();
    console.log(2);
}

一般来说（这是我的观点）我会避免后者。像这样注册的事件很难删除和修改。您也不能轻易地将多个处理程序注册到同一事件的同一元素。