Make div background clickable when there's a button inside

Question

I have a div with a button inside, i want to create separate click events for both but when the button is clicked it is firing the button event and the container event. Can someone help me out. I'm not using jQuery.

var button = document.querySelector('button');
button.addEventListener('click', function(){
  alert('button clicked');
})
var container = document.querySelector('.container');
container.addEventListener('click', function(){
  alert('container clicked');
})

.container{
  width:300px;
  height:300px;
  border:1px solid;
  position:relative;
  z-index:1;
}
button{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
      z-index:2;
}

<div class="container">
  <button>click</button>
</div>

score 3 · Accepted Answer · answered Apr 13 '18 at 13:17

Use e.stopPropagation(); to stop the propagation of event from child element to parent element.

var button = document.querySelector('button');
button.addEventListener('click', function(e){
  e.stopPropagation();
  alert('button clicked');
})
var container = document.querySelector('.container');
container.addEventListener('click', function(){
  alert('container clicked');
})

.container{
  width:300px;
  height:300px;
  border:1px solid;
  position:relative;
  z-index:1;
}
button{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
      z-index:2;
}

<div class="container">
  <button>click</button>
</div>

Just be sure on stopPropagation and preventDefault

stopPropagation stops the event from bubbling up the event chain.

preventDefault prevents the default action the browser makes on that event.

Mamun · Answer 2 · 2018-04-13T13:28:14.893

Try e.stopPropagation() on button click from bubbling up the event to the parent.

For More: stopPropagation()

Working Code:

var button = document.querySelector('button');
button.addEventListener('click', function(e){
  e.stopPropagation();
  alert('button clicked');
})
var container = document.querySelector('.container');
container.addEventListener('click', function(){
  alert('container clicked');
})

.container{
  width:300px;
  height:300px;
  border:1px solid;
  position:relative;
  z-index:1;
}
button{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
      z-index:2;
}

<div class="container">
  <button>click</button>
</div>

Make div background clickable when there's a button inside

2 Answers2