#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()
вместо этого. Это также предотвращает запуск любых других обработчиков.