Блог

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

Реагирующее событие щелчка не пузырится

#javascript #reactjs #dom-events

#javascript #reactjs #dom-события

Вопрос:

У меня возникла проблема с пузырением события реакции. У меня есть пара со значком внутри элемента span и где-то в верхнем элементе раздела, как в этом примере ниже:

 const App = () => {
  const onClick = (event) => alert(event.target.nodeName);
  return (
    <section onClick={onClick}>
      <span>
        <i className="fas fa-reply"></i> Click me
      </span>
    </section>
  );
};

После нажатия на i тег я жду события bubble — чтобы вызвать onClick по крайней мере дважды (1-й для i, 2-й для span). Но этого никогда не происходит. Не могли бы вы рассказать мне, почему?

Я знаю возможное решение — установить pointer-events на i none , но мне больше любопытно, почему событие не пузырится.

Спасибо

Ответ №1:

Я видел код, который вы упомянули в вопросе.

Во-первых, вы не добавили событие onClick в

 <i/>

тег. Сначала добавьте в него onClick, а затем попробуйте добавить и для span. На данный момент я вижу, что вы добавили onClick только для раздела.

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

1. Спасибо. Из-за глубокого уровня компонента, <span> и <i> я решил добавить прослушиватель onClick поверх этого, чтобы фильтровать клики. Есть ли какое-либо объяснение без изменения элементов span и icon?

2. Я думаю, что вы запутались или, возможно, не совсем понятны. Пузырьки возникают только тогда, когда у дочернего элемента есть onClick, тогда у его родителя также есть onClick, тогда у великого родителя также есть onClick. Только тогда происходит событие пузырьков

3. Да, вчера я понял это, после 5-го раза чтения страницы событий js bubbling.. Я не знаю, почему я думал, что пузырение работает, когда верхний родитель прослушивает события и будет перехватывать все события, связанные с иерархией

Метки: