javascript - 链接 onClick 事件中的链接 - 避免同时触发点击事件

Question

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

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

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

JSFiddle

Answer 1

Javascript 事件将通过树向上传播。

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

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

然而，当您不在 JavaScript 中使用 .addEventListener() 注册处理程序时，这会变得有点困惑。

如果你以这种方式添加事件，你可以这样做(首先给你的 anchor 一个 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);
}

一般来说(这是我的意见)我会避免后者。像这样注册的事件很难删除和修改。您也无法轻松地将多个处理程序注册到同一事件的同一元素。

stopPropagation docs