Apply click method to outer div but not inner div [duplicate]

Question

In this example I want the alert to be triggered when the black outer div is clicked but not when anything inside the inner div is clicked.

Currently when I click the inner button it triggers the alert.

$("#outer").click(function() {
  alert("triggered");
});

#outer{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
#inner{
  background-color: #fff;
width: 300px;
height: 300px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">

  <div id="inner">
    <button>inner button</button>
  </div>
</div>

I want inside the inner div nothing to trigger the alert. How do i do this?

(for some reason inner button isn't showing in snippet, here is codepen link: https://codepen.io/GuerrillaCoder/pen/Pmvmqx)

Answer 1

You just need to check for id of element, as inner is child element, it will always propagate the event to parent element (outer).

$("#outer").click(function(event) {
 if(event.target.id=="outer"){
  alert("triggered");
 }
});

Answer 2

You can use event.stopPropagation(); when clicking the inner div:

$("#outer").click(function() {
    alert("triggered");
});
$('#inner').click(function (evt) {
    evt.stopPropagation();
});

#outer{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
#inner{
    background-color: #fff;
    width: 300px;
    height: 300px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
   <div id="inner">
       <button>inner button</button>
   </div>
</div>

Answer 3

In the click function check event target equal to outer

    $("#outer").click(function(e) {
        if (e.target.id === "outer"){
            alert("triggered");
         }
    });

Answer 4

I think event.stopPropagation() method would be most useful solution.you only need to call it on the children of outer div:

$("#outer").on('click', function () { 
   alert("triggered");
}).children().on('click', function (e) {
    e.stopPropagation();
});

Also check this Solution.

Answer 5

Pure javascript solution, if anyone cares -))

var inner = document.getElementById("inner");
var btn = inner.querySelector("button");
document.getElementById("outer").addEventListener("click", function(e) {
  (e.target == btn) || (e.target == inner) ? console.log("click triggered from"+ e.target+". so we do not alert anything") : alert("something"); 
});

#outer{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
#inner{
  background-color: #fff;
width: 300px;
height: 300px;
  text-align: center;
}

<div id="outer">

  <div id="inner">
    <button>inner button</button>
  </div>
</div>

Answer 6

Another way to do this:

$("#outer").click(function() {
  alert("triggered");
});
$("#inner").click(function(e) {
 e.stopPropagation() 
});

#outer{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
#inner{
  background-color: #fff;
width: 300px;
height: 300px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
  <div id="inner">
    <button>inner button</button>
  </div>
</div>

Answer 7

You can use event.target to check event if is triggered by parent or by its children:

$("#outer").click(function(e) {
  if( e.target !== this ) {
       return;
   } else {
       alert("triggered");

   }
});