我在https://javascript.info/bubbling-and-capturing上閱讀了關于冒泡的文章。
根據文章，article標簽上的以下事件id="article"應該冒泡到<p id="para"></p>, 其中文章嵌套。
let para = document.getElementById("para");
let article = document.getElementById("article");
/*
article.addEventListener("click", () => {
console.log("I'm an article tag!");
});
*/
para.addEventListener("click", () => {
console.log("I'm a p tag!");
}); <p id="para">
<article id="article">Click Me!</article>
</p>但是，絕對不會發生任何事情。事件偵聽器article作業正常（未注釋掉時）。為什么？
uj5u.com熱心網友回復：
您的 HTML 無效。An<article>不能是 a 的孩子<p>- 查看呈現的 HTML：
console.log(document.body.innerHTML);<p id="para">
<article id="article">Click Me!</article>
</p>其結果是，瀏覽器結束了<p id="para">的時候<article>標簽開始-所以他們不再是父母與子女，兄弟姐妹卻。
（<p>標簽只能包含詞組內容，<article>標簽不包含）
首先確保您的 HTML 通過驗證。
如果你使用了其他有效的東西 - 比如<span>- 它會起作用：
let para = document.getElementById("para");
let article = document.querySelector("span");
/*
article.addEventListener("click", () => {
console.log("I'm an article tag!");
});
*/
para.addEventListener("click", () => {
console.log("I'm a p tag!");
});<p id="para">
<span id="article">Click Me!</span>
</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/358317.html
標籤：javascript html 事件处理 事件冒泡
上一篇：生成物件參考的哈希字串