javascript - 检测事件气泡中的元素

Question

我有这个 html 代码：

<div class="container">
   <div class="parent">
     <!-- P Element Completely On Parent -->
     
     <p style="width: 100%; height: 100%;">Hello</p>
   
     </div>
   ........
</div>

这是我的 Javascript：

document.querySelector(".container").addEventListener("click", (e) => {
 
  if ( e.target == document.querySelector(".parent") ) {
    
     alert(" It Worked!!! ")
  
  }

}, 
true // <--- bubbling
)

• 我不想添加 jQuery 等库...
• 我不想设置 p 元素style="pointer-events: none"
• 我想使用动态代码（不要使用 e.target.parentElement）

是否可以检测父元素点击而不给它事件（事件冒泡）？

客户端单击 p 元素后，结果代码应该可以工作

标签： javascriptjquerydom-eventsjquery-eventsevent-bubbling

Answer 1

是的，你可以试试这个

document.querySelector(".container").addEventListener("click", (e) => {
  
  var parentel = e.target.parentElement

  if (parentel.className == "parent") {

    alert(" It Worked!!! ")
  }
})

<div class="container">
  <div class="parent">
    <!-- P Element Completely On Parent -->

    <p class- "child" style="width: 100%; height: 100%;">Hello</p>

  </div>
</div>