СОБЫТИЕ CLICK РАСПРОСТРАНЯЕТСЯ ДАЖЕ БЕЗ ОБРАБОТЧИКА

<body>
  <form id = "form">FORM
    <div id = "div" style = "background-color: aqua;">DIV
      <p id = "p" style = "background-color: blue;">P</p>
    </div>
  </form>
  <script src = "index.js"></script>
</body>

Хотя у меня нет обработчика кликов ни на p, ни на div (это специально), когда я нажимаю, например, на div, он вызывает щелчок на более внешнем элементе (form).

JS:

let form = document.getElementById('form');
let div = document.getElementById('div');
let p = document.getElementById('p');

form.addEventListener("click", e => { // why is this event triggered when I click on p or div?
  console.info("capturing form")
}, true);
div.addEventListener("focus", e => { // it's intentional
  console.info("capturing div")
}, true);
p.addEventListener("focus", e => { // it's intentional
  console.info("capturing p")
}, true);

Выход:

capturing form

Это ожидаемое поведение?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Обработчик кликов для события — это функция, определяющая дальнейшую обработку при возникновении события. С функцией обработчика или без нее, браузер все равно запустит событие.

Как вы могли видеть в приведенном ниже фрагменте, событие щелчка будет распространяться от дочернего элемента к родительским элементам. Всплывающие события являются ожидаемым поведением для события click.

let form = document.getElementById('form');

form.addEventListener("click", e => {
  console.info("** click event on element: " + e.target.id);
  console.info(".  bubbling to element: " + e. currentTarget.id);
}, true);

form.addEventListener("keyup", e => {
  console.info("** keyup event on element: " + e.target.id);
  console.info("   bubbling to element: " + e. currentTarget.id);
}, true);

form.addEventListener("focusin", e => {
  console.info("** focusin event on element: " + e.target.id);
  console.info("   bubbling to element: " + e. currentTarget.id);
}, true);
<form id = "form" >FORM
    <div id = "div" style = "background-color: aqua;">DIV
      <p id = "p" style = "background-color: blue;">P</p>
      <input id = "text" type = "text" />
    </div>
  </form>

привет @Trung Duong, я сделал это намеренно, потому что это часть вопроса, фокус не связан с щелчком, но щелчок активируется в форме.

Coder23 22.02.2023 17:07

Да, я отредактировал свой ответ в соответствии с вашим обновленным вопросом. Всплывание события является нормальным поведением для события, на которое нажали. Если хотите, вы можете остановить всплывающее событие в функции обработчика кликов stackoverflow.com/questions/387736/…

Trung Duong 22.02.2023 17:13

@ Coder23 Кроме того, если вы хотите, чтобы событие focus запускалось, вы должны установить tabindex для соответствующих элементов.

Trung Duong 22.02.2023 17:14

но почему щелчок по p (у которого нет обработчика кликов, но есть фокус) вызывает событие click в форме? По-моему, это не имеет никакого отношения @Trung Duong

Coder23 22.02.2023 17:23

Он должен распространяться только в том случае, если у p есть обработчик кликов, верно?

Coder23 22.02.2023 17:25

Когда вы нажимаете на 1 элемент, независимо от того, имеет ли этот элемент обработчик щелчка, это событие щелчка будет всплывать к его родителю. Подробнее об этом можно узнать по этой ссылке developer.mozilla.org/en-US/docs/Learn/JavaScript/…

Trung Duong 22.02.2023 17:26

Обработчик кликов для события — это функция, определяющая дальнейшую обработку при возникновении события. С функцией обработчика или без нее, браузер все равно запустит событие.

Trung Duong 22.02.2023 17:33

независимо от того, имеет ли этот элемент обработчик кликов, это событие клика будет всплывать к его родителю - где упоминается @Trung Duong?

George Meijer 22.02.2023 18:19

@GeorgeMeijer Вы можете попробовать мой обновленный фрагмент, чтобы увидеть идентификатор целевого элемента, который запускает событие щелчка и всплывает (без прикрепления к нему какого-либо обработчика), или перейдите по этой ссылке, чтобы увидеть, как все события запускаются для элемента stackoverflow.com/questions /10213703/…

Trung Duong 22.02.2023 18:59

привет @Trung Duong, эта вещь о событиях, распространяющихся на предков без обработчика, относится ли она только к щелчку?

George Meijer 22.02.2023 19:12

@GeorgeMeijer Это также происходит (всплывание событий) для других событий, таких как keyup, keydown, focusin ... Я добавил несколько примеров событий в свой ответ, пожалуйста, проверьте.

Trung Duong 22.02.2023 19:27

Теперь я понимаю @Trung Duong +1. Сначала запускаются события фазы захвата, а затем события фазы всплытия, верно? «Пострадавшие» элементы — это все те, кто участвует как потомки (захват)/восходящие (пузырьки) цели, верно?

Coder23 22.02.2023 22:06

@Coder23 Coder23 Да, когда элемент получает событие, это событие всплывает (или, можно сказать, передается или распространяется) к его родительскому и предковому элементам в дереве DOM, пока не доберется до корневого элемента. Обратите внимание, что некоторые конкретные события не будут всплывать на его родителей, например focus, blur...

Trung Duong 23.02.2023 05:25

отлично @Trung Duong спасибо +1

Coder23 23.02.2023 12:32

Другие вопросы по теме