单击内部元素时如何停止外部div事件的触发器？ 并且所有事件都绑定到$（document.body）

Question

单击内部元素时，如何停止外部div事件的触发器？ 而且所有事件都绑定到$（document.body），所以我认为我不应该停止事件stopPropagation。 当我单击$（“。logLi”）时，我只想触发内部ele事件。 我的代码有什么问题，我该如何解决？ 这是我的代码

<div class="clomn">
  <div class="logLi">
   <span>aaaaaaa</span><em>bbbbbb</em>
 </div>
</div>
$(document.body).on("click", ".clomn .logLi", function(e) {
  console.log("inner");
})
$(document.body).on("click", ".clomn", function(e) {
  console.log("outer")
})

Answer 1

您可以阻止事件的传播，但是我更喜欢检查父单击处理程序，以检查事件是否在子元素中发生，然后将其丢弃

 $(document.body).on("click", ".colmn .logLi", function(e) { console.log("inner: 2"); }) $(document.body).on("click", ".colmn", function(e) { if ($(e.target).closest('.colmn .logLi').length == 0) { console.log("outer"); } }) $(".colmn .logLi").click(function() { console.log('inner: 1') }) 

 .colmn { border: 1px solid red; padding: 15px; } .logLi { border: 1px solid green; padding: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="colmn"> <div class="logLi"> <span>aaaaaaa</span><em>bbbbbb</em> </div> </div> 

Answer 2

按父类名称查找e.target ，如果在.logLi单击，则父类将为.logLi 。 不需要两个单击功能。

$(document.body).on("click", ".clomn .logLi", function(e) {
  if($(e.target).parent().attr("class") == "logLi"){
    console.log("inner");
  }
  else{
    console.log("outer");
  }
});