如何将事件侦听器添加到彼此内部的元素

Question

这张图片是为了解释我的问题是什么：

我有一个详细信息框，我已经向它添加了“点击”事件侦听器。我想在有人单击此 link 时跳转到另一个页面。另外，我要将“单击”事件侦听器添加到此框内的按钮（用于执行其他操作）。

问题是每当我单击按钮时，与框对应的事件监听器就会运行，而与按钮对应的事件监听器则不会。

如何解决这个问题？任何帮助都会很棒。

Answer 1

如果我没理解错的话，您正在寻找 event.stopPropagation() 事件属性。

MDN Documentation link on Event.stopPropagation()

JSFiddle Example

const detailsAlert = e => {
    alert('details alert!');
}

const buttonAlert = e => {
e.stopPropagation();
alert('button alert!');
}

document.getElementById("details").addEventListener('click', detailsAlert, false)

document.getElementById('btn').addEventListener('click', buttonAlert, false);

如何将事件侦听器添加到彼此内部的元素

How to add event listeners to elements that are inside one another

javascript

dom

onclick

dom-events

onclicklistener