How to detect an event is triggered on element itself?

Question

I want the event only fired when I click the div itself, the problem is it will also fired when I click the button, which is not what I want. What should I do?

document.querySelector('.container').addEventListener('click', e => {
    console.log('click div');
});

<div class="container" >
    <button>Click me</button>
</div>

Answer 1

You can check if the event target matches the current target, and only then run the callback function:

eventOnCurrentElement(".container", "click", e => {
   console.log("clicked div");
});

function eventOnCurrentElement(selector, event, callback) {
  document.querySelector(selector).addEventListener(event, e => {
    if (e.currentTarget === e.target) {
      callback(e)
    }
  });
}

<p>Click beside the button:</p>
<div class="container">
  <button>Click me</button>
</div>

e.currentTarget always refers to the element to which the event handler has been attached, as opposed to e.target which identifies the element on which the event occurred.

Answer 2

Add this into your code:

document.querySelector('button').addEventListener('click', e => {

    e.stopPropagation();
});

Your issue was due to eventPropagation, the button click event bubbles up into the div click event.

Check eventPropagation here.

Answer 3

You can check if the target is actually the container or a descendant like so:

var container = document.querySelector('.container');
container.addEventListener('click', e => {
  if (e.target !== container)
    return;
  console.log('click div');
});

https://codepen.io/anon/pen/dqaNdR

Answer 4

Check if the target is equal to the currentTarget

document.querySelector('.container').addEventListener('click', e => {
    if(e.target !== e.currentTarget)
        return false;
    console.log('div');
    //Your code
});

<div class="container" >
    <button>Click me</button>
</div>

If you are using jQuery;

$(document).on('click', '.container', function(event){
    if(event.target !== this)
        return false;
    console.log('div');
    //Your code
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" >
    <button>Click me</button>
</div>

Answer 5

You have to check event target and currentTarget as follow code:

<div class="container">
  <button>Click me</button>
</div>

container.addEventListener('click', (e) => {
    if (event.target === e.currentTarget) {
      // any code
      console.log('click div');
    }
});