Question

我尝试理解事件冒泡，同时尝试使用自己的代码： `

<!DOCTYPE html>
    <html>
       <body>
          <div onclick="alert('1')">
             1
             <div onclick="alert('2')">
                2
                <div onclick="alert('3')">3</div>
             </div>
          </div>
       </body>
    </html>

在这里我看到，当单击div 3时，它显示三个警报（3 2 1）。将第一个div标签更改为P标签后，单击同一div 3，它只显示两个警报（3 2）。在这里，为什么警报1不在，因为它在parent（P）标记下。

将第一个div标签更改为P标签后，代码如下：

<p onclick="alert('1')">
  1
  <div onclick="alert('2')">
    2
    <div onclick="alert('3')">3</div>
  </div>
</p>

Answer 1

仅是因为浏览器会在对HTML标记进行分层的过程中修复您的错误。
由于</p>不是<div>的后代，因此在适当的位置（在块级DIV之前）插入结束<p>标记。

结果标记为：

<p onclick="alert('1')">
  1
</p>
<div onclick="alert('2')">
  2
  <div onclick="alert('3')">3</div>
</div>
<p></p>

了解事件冒泡

1 个答案: