Почему event.preventDefault () может предотвратить поведение браузера по умолчанию для дочернего элемента? - PullRequest
Новая
       30

Почему event.preventDefault () может предотвратить поведение браузера по умолчанию для дочернего элемента?

0 голосов
/ 19 октября 2018

Я понимаю, что event.preventDefault() может предотвратить поведение браузера по умолчанию, но почему это работает, если вы включили это в обработчик событий родительского элемента?

пример: 

document.getElementById("parent").addEventListener('click', (e)=>{
  alert('parent click');
  //e.stopPropagation();
  e.preventDefault();	
  
});

document.getElementById("button").addEventListener('click', (e)=>{
  alert('click');
  //e.stopPropagation();
  //e.preventDefault();	
  //return true;
  
  });
.foo{
  background-color: red;
  text-align: center;
  padding: 16px;
  margin-bottom: 16px;
}
<div id ="parent">
  <a href="http://www.google.com" target="_blank">
    <div id="button" class="foo" tabindex='-1'> hello </div>
  </a>
</div>

Если вы нажмете кнопку, навигации не будет.почему это работает?

1 Ответ

0 голосов
/ 19 октября 2018

Потому что так работает структура DOM.В этом случае кнопка является частью родительского элемента.Поэтому щелчок по кнопке также является щелчком по родительскому элементу, и поэтому оба щелчка будут запущены.Обратите внимание, что щелчки будут срабатывать снизу вверх, что означает, что сначала будет вызываться событие кнопок, после чего срабатывает его родитель, после чего родительский объект получит событие onclick и т. Д.

Если это приводит к нежелательному результату, вы можете предотвратить это, используя, как я думаю, вы уже заметили, функцию event.stopPropagation().Если этот метод вызывается, событие не будет инициировано родителями от этого элемента вверх.

...