点击事件发生时如何捕获最外部的元素

Question

我需要在点击div时获取最多的元素...比如这个...

 <div id="show_trash_id" class="switch switch-xs">
   <input type="checkbox"/>
   <span class="slider round">
     <span class="text-on">ON</span>
     <span class="text-off">OFF</span>
   </span>
 </div>

我认为这与某种冒泡或捕获效果有关。但是我无法处理...我已经尝试过 event.stopPropagation() 或使用 useCature 均未成功。

function capture (event) {
   event.stopPropagation();
   console.log(event.target);
}
document.querySelector('#show_trash_id').addEventListener('click', capture, true)

简而言之，我想要的是在控制台中显示以下波纹管：

     <div id="show_trash_id" class="switch switch-xs">
       <input type="checkbox"/>
       <span class="slider round">
         <span class="text-on">ON</span>
         <span class="text-off">OFF</span>
       </span>
     </div>

Answer 1

我以前遇到过这个问题。我的解决方案一直是使用匿名函数并使用 this 关键字而不是 event.target，因为它指的是事件侦听器添加到的元素。

但是请注意，匿名函数不能是箭头函数，因为 this 在箭头函数的上下文中是 window.

document.querySelector('#show_trash_id').addEventListener('click', function(e) {
  console.log(this);
});

 <div id="show_trash_id" class="switch switch-xs">
   <input type="checkbox"/>
   <span class="slider round">
     <span class="text-on">ON</span>
     <span class="text-off">OFF</span>
   </span>
 </div>

点击事件发生时如何捕获最外部的元素

How to capture the most exterior element when click event occurs

javascript

click

addeventlistener

event-bubbling

event-capturing