How can I know event reach which element?

Question

my html structure like this below:

<div onclick='g(e)'>
    <span><button>click me</button></span>
</div>

when I click the button tag,the click event will deliver to the div.So my question is when the click event deliver to the span element,if some condition is true,then I can call e.stopPropagation(),and it will not deliver to the div element,the function g wil not run.Would you like to help me?Thanks.

Answer 1

$('span').click(function(e){if(true){e.stopPropagation();e.preventDefault()};});

Answer 2

you can try it but in your case it always come on button

IN HTML

<div rel="div">
    <span rel="span"><button>click me</button></span>
</div>

in JS

$("button").click(function(e){
   console.log(e.target);
if($(e.target).attr("rel")=="span")
{
e.stopPropagation();
    alert("click on span");
    //f(e);
}
else if($(e.target).attr("rel")=="div"){
alert("click on div");

}
  else{
      alert("click on button");
    }

});

see demo

or you want to your work then apply click action on div in this span ,button and div come like below

$("div").click(function(e){
   console.log(e.target);
if($(e.target).attr("rel")=="span")
{
e.stopPropagation();
    alert("click on span");
    //f(e);
}
else if($(e.target).attr("rel")=="div"){
alert("click on div");

}
  else{
      alert("click on button");
    }

}); 

see demo