How can I prevent triggering an on click event when the actual mouse click didn't start on the target element?

Question

I need to capture an onclick event on the parent element but also ignore it if the click is done inside the child element. So if you click directly inside the child element nothing should happen. I managed to do just that in the code below. However, if I start the click ( mouse button pressed ) inside the child element but then finish the click ( mouse button released ) outside the child element (and inside the parent element) it counts as if the click was done entirely on the parent element. So, even it's a onclick event, it's behaving like mouseup event (IMHO). The problem with that is that when the user interacts with the child element (for instance, selecting the text inside the child element) it's possible to accidentally trigger the event. What I need is to detect this click event only when it starts and finishes inside the parent element and outside the child element.

 document.querySelector('.parent').addEventListener('click', my_function); function my_function() { if(event.target.classList.contains('parent')) { document.querySelector('.child').innerHTML = 'Click event detected.'; } } 

 .parent { color: #fff; padding: 100px; background-color: red; } .child { color: #fff; height: 200px; padding: 10px; background-color: black; } 

 <div class="parent"> This is the parent element where the click event should be detected. <div class="child"> This is the child element where the click event should NOT be detected. However, if you start your click here (mouse button down) and then finish it (mouse button up) outside this element (and inside the parent element) then the click is still detected. How can I solve this? </div> </div> 

Answer 1

You can add a click listener to the child and prevent event propagation:

document.querySelector('child').addEventListener('click', ($event) => {
  $event.stopPropagation();
});

This way, the event doesn't "bubble up" to the parent. Here are the MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Answer 2

You could try using mousedown event instead of click and it'll work almost exactly the same but without the issue you're mentioning

 document.querySelector('.parent').addEventListener('mousedown', my_function); function my_function() { if(event.target.classList.contains('parent')) { document.querySelector('.child').innerHTML = 'Click event detected.'; } } 

 .parent { color: #fff; padding: 100px; background-color: red; } .child { color: #fff; height: 200px; padding: 10px; background-color: black; } 

 <div class="parent"> This is the parent element where the click event should be detected. <div class="child"> This is the child element where the click event should NOT be detected. However, if you start your click here (mouse button down) and then finish it (mouse button up) outside this element (and inside the parent element) then the click is still detected. How can I solve this? </div> </div> 

All i changed here was the event from click to mousedown and the issue seems to be completely gone.

Answer 3

Definitely overkill, but it works. I build in a variable to enable and disable the click event.

 var stopEvent = false; var clickedOnChild = false; document.querySelector('.child').addEventListener('mousedown', function(e){ clickedOnChild = true; stopEvent = true; }); document.querySelector('.child').addEventListener('mouseup', function(e){ clickedOnChild = false; stopEvent = true; }); document.querySelector('.parent').addEventListener('mouseup', function(e){ if(clickedOnChild){ clickedOnChild = false; stopEvent = true; } else { stopEvent = false; } }); document.querySelector('.parent').addEventListener('click', my_function); function my_function() { if (stopEvent) { return false; } else { stopEvent = false; } if(event.target.classList.contains('parent')) { document.querySelector('.child').innerHTML = 'Click event detected.'; } stopEvent = false; } 

 .parent { color: #fff; padding: 100px; background-color: red; } .child { color: #fff; height: 200px; padding: 10px; background-color: black; } 

 <div class="parent"> This is the parent element where the click event should be detected. <div class="child"> This is the child element where the click event should NOT be detected. However, if you start your click here (mouse button down) and then finish it (mouse button up) outside this element (and inside the parent element) then the click is still detected. How can I solve this? </div> </div>