Im creating a menu for mobile, and I want to add a function for overlay click.

When I click on menu (purple part), it doesn't need to close, but when I click on blue section, then its need to close.

I wrote a jQuery, who gets only purple section, but when I click on blue part the alert didn't appear. There's gonna be my JSFiddle for test, to see.

And here is my code

$('.outer-content .inner-content').on('click', function() {
  $(".outer-content .inner-content").data('clicked', 'yes');
  var isClicked = $('.outer-content').data('clicked');
  if (isClicked == 'yes') {
    alert("clicked the blue block");
  } else {
    alert("clicked the purple block");
  }
});

.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}

<script src=".12.4/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>

Im creating a menu for mobile, and I want to add a function for overlay click.

When I click on menu (purple part), it doesn't need to close, but when I click on blue section, then its need to close.

I wrote a jQuery, who gets only purple section, but when I click on blue part the alert didn't appear. There's gonna be my JSFiddle for test, to see.

And here is my code

$('.outer-content .inner-content').on('click', function() {
  $(".outer-content .inner-content").data('clicked', 'yes');
  var isClicked = $('.outer-content').data('clicked');
  if (isClicked == 'yes') {
    alert("clicked the blue block");
  } else {
    alert("clicked the purple block");
  }
});

.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>

• javascript
• jquery
• html
• css

• jsfiddle/cj7z8pq9 – Banzay Commented Mar 7, 2017 at 10:02
• jsfiddle/ofu4mbtL/13 – Piyush Kumar Baliyan Commented Mar 7, 2017 at 10:05
• I would remend to not have a single click event to process both code paths but to keep the events separated. Blue is to "close" but Purple is not but might do other things now of in the future. I added an example in an answer. – Nope Commented Mar 7, 2017 at 10:14

6 Answers 6

Basically there are two event models in javascript. Event capturing and Event bubbling. In event bubbling, if you click on inside div, the inside div click event fired first and then the outer div click fired. while in event capturing, first the outer div event fired and than the inner div event fired. To stop event propagation, use this code in your click method.

  e.stopPropagation();

JSFIDDLE

Your code:

$('.outer-content').on('click', function(e) {
  alert("clicked the blue block");

});
$('.inner-content').on('click', function(e) {
  alert("clicked the purple block");
  e.stopPropagation();
});

.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>

$('.outer-content').on('click', function(event) {
  if ($(event.target).hasClass('inner-content')) {
    alert("clicked the purple block");
  } else {
    alert("clicked the blue block");
  }
});

.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>

When I click on menu(purple part), it doesnt need to close, but when I click on blue section, then its need to close

Why not target the blue element directly and only process any code to close when it is clicked as seen below.

If you need other code to execute when the purple element is clicked, bind to that separately.

$('.outer-content').on('click', function(e) {
  if (e.target == this) {
    // add "close" code here
    alert("will close");
  }
});

// You still can add code when clicking the purple element if needed...
$('.inner-content').on('click', function(e) {
  alert("I'm purple but separate code and will not close");
});

.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>

You can do that by adding event on outer content and then use the event.target property to check the element that has been clicked

$('.outer-content').on('click', function(e) {

  if( $(e.target).hasClass('outer-content')){
        alert("clicked the blue block");
  } else {
        alert("clicked the purple block");
  }
});

Due to event bubbling any event in the child element will be propagated to parent element as well.

$('.outer-content, div:not("inner-content")').on('click', function() {
  $(".inner-content").slideToggle();
});

.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>

$('div').on('click', function(e) {
    e.preventDefault();
    e.stopImmediatePropagation()
  if($(e.target).is('.inner-content')){
  	alert("clicked the purple block");
  }else{
  	alert("clicked the blue block");
  }
});

.outer-content{
  width:100%;
  height:200px;
  background:lightblue;
  position:relative;
}

.inner-content{
  width:300px;
  background:purple;
  position:absolute;
  margin:auto;
  top:0;  bottom:0;  right:0;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>