Запуск события на кнопке внутри div с тем же событием

#javascript #reactjs

#javascript #reactjs

Вопрос:

Как я могу вызвать onKeyDown на моей кнопке, а не onKeyDown на моем div, когда одна из моих кнопок сфокусирована и происходит нажатие клавиши вниз? Даже если кнопка сфокусирована, и я нажимаю клавишу, запускается onKeyDown для div, а не onKeydDown для кнопки. Как я могу отличить, какие действия предпринять? Я знаю, что в этом что-то есть event.stopPropagation(); , но я не заставил это работать.

Пример:

 <div onKeyDown={handleKeyDownInDiv}>
  <button onKeyDown={handleKeyDownInButton} />
</div>
 

Спасибо за любую помощь!

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

1. Ваш фрагмент кода выглядит как JSX, используете ли вы библиотеку? (Если да, пожалуйста, укажите соответствующие теги) И stopPropagation() если вы будете делать то, что вам нужно, пожалуйста, покажите, как вы использовали его до сих пор, и мы, возможно, сможем указать на любые проблемы с реализацией.

2. Да, я использую React. Извините, что не упомянул об этом. Теперь я добавил тег

Ответ №1:

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

Вы можете просто использовать event.stopPropagation() :

 <div onClick={() => console.log('div clicked')}>
  <button onClick={event => {
    event.stopPropagation();
    console.log('button clicked');
  }}>button</button>
</div>
 

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

1. Спасибо за ваш вклад! Я делаю это, но я думаю, что с событием, переданным кнопке, происходит какая-то путаница. Компонент кнопки кем-то «самодельный», а реквизит «on_click» запускается как при onClick, так и при onKeyDown. Может быть, это не одно и то же событие? Такое, что я не могу предотвратить его всплытие? Если я понимаю event.stopPropagation , он должен идти как можно дальше вниз, а затем прекратить запускать другие обработчики событий на пути «вверх»? Если я недопонимаю, пожалуйста, объясните это просто для меня.

2. В этом случае, возможно, попробуйте event.stopImmediatePropagation() вместо этого. Это также предотвращает запуск любых других обработчиков.