如何將事件偵聽器添加到彼此內部的元素

Question

這張圖片是為了解釋我的問題是什么：

我有一個詳細信息框，並且已向其中添加了“單擊”事件偵聽器。 當有人單擊此鏈接時，我想跳轉到另一個頁面。 另外，我要向此框中的按鈕添加“單擊”事件偵聽器（用於執行其他操作）。

問題是每當我單擊按鈕時，與框對應的事件偵聽器就會運行，而與按鈕對應的事件偵聽器則不會。

我該如何解決這個問題？ 任何幫助都會很棒。

Answer 1

如果我理解正確，您正在尋找event.stopPropagation()事件屬性。

Event.stopPropagation() 上的 MDN 文檔鏈接

JSFiddle 示例

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);