how can I stop the trigger of the outer div event when I click the inner element? And all the events are bound to $(document.body)

Question

How can I stop the trigger of the outer div event when I click the inner element? And all the events are bound to $(document.body),so i think i should not stop event stopPropagation. When I click $(".logLi"), I just want to trigger the inner ele event. What is wrong with my code and how can i solve the problem? here is my code

<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

You can prevent the propagation of the event, but I prefer to check in the parent click handler to check whether it has occurred in a child element then discard it

$(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

find by parent class name of e.target ,if you clicked inside .logLi your parent class will be .logLi . Do not need two click functions .

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

Answer 3

I'm on a React.js app but I use dom properties here, and I solved it using e.target.id and e.target.localName

I have an outer div with a certain id, and an inner div (or actually button inside it and a click handler for the div and another for the button), so I just check the ids via e.target.id. (or whether it was the button clicked or the div via e.target.localName).

If you have a button inside a div you can use e.target.localName, for example inside your click handler.

What the react component returns:

<div id='outerDiv' onClick={outerDivHandler}>
  <div id='innerDiv' onClick={innerDivHandler}>
  ...
  </div>
</div>

The handler functions:

function outerDivHandler(e) {
  if (e.target.id !=== 'innerDiv') {
  //  stuff for your outer div exclusively here //
  }
}

Like that or any other combination you want to handle your divs (or any other nested elements' handlers for that matter) click events.

The events of course will still trigger, but if you check the divs' id on the handler or e.target.localNamee to check whether it was a button click or a div click you are the one that controls whether the actions will happen.