инициировать событие только по родительскому клику, а не по дочернему - PullRequest
Новая
       12

инициировать событие только по родительскому клику, а не по дочернему

0 голосов
/ 08 мая 2019

Рассмотрим следующий код в качестве примера: 

<div id="parent">
  <div id="child">info goes here</div>
</div>

//javascript
function something{
//do something;}
//initial attempt
document.getElementById('parent').addEventListener('click',something);
//event capture
document.getElementById('parent').addEventListener('click',something,true);

Когда я щелкаю по родительскому элементу, я хочу, чтобы он что-то делал, а когда я щелкаю по дочернему элементу, я хочу, чтобы он ничего не делал. Проблема в том, что когда я нажимаю на дочерний элемент, он вызывает «что-то». Я подумал, что это может быть всплывающее событие, такое, что если я нажму на дочерний элемент, событие оттуда всплывет к родительскому. Тогда я думал о захвате события, но это также вызывает эту проблему.

Буду очень признателен за любые советы или предложения о том, как этого добиться.

Ответы [ 3 ]

1 голос
/ 08 мая 2019

Используйте event.stopPropagation, чтобы остановить всплытие событий: 

function something() {
  console.log("something");
}
document.getElementById('parent').addEventListener('click', something);
document.getElementById('child').addEventListener('click', e => e.stopPropagation());
<div id="parent">
  Parent info goes here!
  <div id="child">Child info goes here!</div>
</div>
0 голосов
/ 08 мая 2019

Вместо этого проверьте, действительно ли элемент, инициирующий событие (evt.target), действительно является желаемым элементом

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

function something (evt){
  if (evt.target !== this) return; // Do nothing
  // else...
  console.log(`#${this.id} clicked`);
}

const el_parent = document.getElementById('parent');
el_parent.addEventListener('click', something);

// Example why you should not use `Event.stopPropagation()`...
document.body.addEventListener('click', () => console.log("BODY is notified!"));
<div id="parent">
  PARENT ELEMENT
  <div id="child">CHILD ELEMENT</div>
</div>

Не использовать Event.stopPropagation()

Event.stopPropagation() будет идеей, , но плохой , поскольку нам следует избегать приложения (на каком-то уровне), чтобы предотвратить всплывающее событие - и в конечном итоге уведомить другие элементы о том, что такое событие произошло , Представьте, что ваш body прослушивает события щелчка, чтобы закрыть пользовательские выпадающие списки ... Если у вас есть элементы, блуждающие вокруг вашего приложения, и которые используют Event.stopPropagation() - при нажатии на такой элемент открытое раскрывающееся меню не закроется - в результате сломан UI . И это был простой пример.

0 голосов
/ 08 мая 2019

Это событие пузырится. Тот факт, что вы обрабатываете событие click для child, не означает, что он перестает пересылать сообщения родительскому элементу.

Есть два подхода к этому. Первый - остановить распространение события следующим образом: document.getElementById('child').addEventListener('click',(e) => { e.stopPropagation(); something() },true);

Второй - проверить цель события и запустить something, только если самый глубокий элемент, вызвавший событие click, является дочерним элементом:

document.getElementById('child').addEventListener('click',(e) => { e.target.id == "child" ? something() : nothing() },true);

...