事件不会从子元素冒泡到父元素

Question

我阅读了 https://javascript.info/bubbling-and-capturing 上关于冒泡的文章。

根据这篇文章，带有 id="article" 的 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 上的事件侦听器工作正常（未注释掉时）。为什么？

Answer 1

您的HTML无效。 <article> 不能是 <p> 的 child - 检查呈现的 HTML:

console.log(document.body.innerHTML);

<p id="para">
  <article id="article">Click Me!</article>
</p>

因此，当 <article> 标记开始时，浏览器结束 <p id="para"> - 所以它们不再是 parent 和child，但兄弟姐妹。

(<p>标签只能包含phrasing content, which the <article> tag is not)

确保您的 HTML 通过 validation first。

如果您使用了其他有效的东西 - 例如 <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>

事件不会从子元素冒泡到父元素

Event not Bubbling to Parent Element from Child Element

html

javascript

event-handling

event-bubbling