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

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在箭头函数的上下文中是窗口。

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>