Блог

Главная - Вопросы по программированию - Распространение события щелчка с несколькими вложенными дочерними элементами

Распространение события щелчка с несколькими вложенными дочерними элементами

#javascript #html #event-propagation

#javascript #HTML #событие-распространение

Вопрос:

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

Как я могу определить, например, при нажатии на кнопку, какой идентификатор кнопки был нажат, поскольку целью события всегда является дочернее изображение. Должен ли я просто знать структуру HTML и запрашивать e.target.parentNode или есть более элегантный способ доступа к промежуточному узлу в дереве распространения событий?

 document.getElementById('parent')
.addEventListener('click', function(e) {
  console.log(e.target.nodeName   ' '   e.target.id);
});  
 #parent {
  border: thin black solid;
  width: 200px;
  height: 200px;
}

#child1, #child2 {
  border: thin green solid;
  width: 100px;
  height: 100px;
}

#btn1, #btn2 {
  border: thin red solid;
  width: 50px;
  height: 50px;
}

#image1, #image2 {
  width: 100%;  
  height: 100%;
}  
 <div id="parent">
  <div id="child1">
    <button id="btn1">
      <img id="image1" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </button>
  </div>
  <div id="child2">
    <button id="btn2">
      <img id="image2" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </button>
  </div>  
</div>

Комментарии:

1. Распространение события означает только то, что, когда вы нажимаете (скажем) на элемент, click обработчики этого элемента и всех его родителей выполняются по очереди. Но в вашем примере только у #parent есть обработчик, поэтому когда-либо выполняется только один console.log . Меня также смущает ваш вопрос о том, как получить идентификатор кнопки, потому что это именно то, что он показывает вам в вашем примере.

2. @RobinZigmond … две вещи: Почему целью в конечном итоге является BUTTON, а не, скажем, IMG? И, во-вторых, я предполагаю, что я ожидал / желал поместить обработчик одного щелчка в родительский div, а затем вызвать его несколько раз, причем целевыми элементами будут все дочерние элементы родительского элемента, которые находились под тем местом, где произошел щелчок, чтобы я мог объединить логику в одном месте и решить, что делать, на основе nodeType целевого объекта. Распространение события, вероятно, неправильный термин для этого, возможно, делегирование события или что-то совсем другое?

3. «Почему целью в конечном итоге является BUTTON, а не, скажем, IMG?». На самом деле я получаю изображение, отображаемое каждый раз, когда я нажимаю на кнопку с изображением, а не на кнопку. (И это имеет смысл, поскольку изображение имеет высоту и ширину 100%, поэтому оно занимает точно такую же область.) Что касается другого вопроса, я все еще не совсем понимаю, что вы пытаетесь сделать, но, как показывает ваш пример, вы действительно можете получить информацию о цели, просто из одного обработчика в родительском. Не означает ли это, что вы уже можете «консолидировать логику в одном месте» и «решать, что делать, на основе nodeType целевого объекта»?