Apply click method to outer div but not inner div

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)

score 14 · Accepted Answer · answered May 28 '17 at 08:43

14

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");
 }
});

answered May 28 '17 at 08:43

Jayakrishnan

4,232
2
23
35

score 12 · Answer 2 · answered May 28 '17 at 08:42

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>

score 5 · Answer 3 · answered May 28 '17 at 08:41

5

In the click function check event target equal to outer

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

answered May 28 '17 at 08:41

Adharsh M

2,773
2
20
33

Oghli · Answer 4 · 2017-05-28T09:08:10.980

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.

edited May 28 '17 at 09:08

answered May 28 '17 at 08:56

Oghli

2,200
1
15
37

score 3 · Answer 5 · answered May 28 '17 at 08:49

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>

score 1 · Answer 6 · answered May 28 '17 at 08:51

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>

score 1 · Answer 7 · answered May 28 '17 at 08:59

1

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");

   }
});

answered May 28 '17 at 08:59

Vibhanshu

522
3
14

score 0 · Answer 8 · answered May 28 '17 at 09:18

0

Try this

$("#outer").click(function(e) {
  e.target.id=='outer'?alert('triggered'):void(0);
});

answered May 28 '17 at 09:18

Rijin Mk

414
3
10

Apply click method to outer div but not inner div

8 Answers8