Как обнаружить событие, запущенное на самом элементе?

Question

Я хочу, чтобы событие срабатывало только при нажатии самого элемента div, проблема в том, что оно также срабатывает при нажатии кнопки, а это не то, что мне нужно.Что мне делать?

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

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

Answer 1

Вы можете проверить, является ли цель на самом деле контейнером или потомком, например:

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 2

Добавьте это в свой код:

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

    e.stopPropagation();
});

Ваша проблема произошла из-за eventPropagation, событие button click переходит в событие div click.

Проверка eventPropagation здесь.

Answer 3

Проверьте, равна ли цель 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>

Если вы используете 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 4

Вы должны проверить события target и currentTarget как следующий код:

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

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

Answer 5

Вы можете проверить, соответствует ли цель события текущей цели, и только затем запустить функцию обратного вызова:

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 всегда относится к элементу, к которому был прикреплен обработчик события, в отличие от e.target, который идентифицирует элемент, на котором произошло событие.