При нажатии кнопки я получаю событие дочернего элемента - PullRequest
0 голосов
/ 13 марта 2020

Я пытаюсь получить событие нажатия кнопки. У меня есть изображение внутри кнопки.

<button onClick={this.selectSubject} value="PHYSICS" className="button-blue"><img src={Magnet} />PHYSICS</button>

Когда я нажимаю на кнопку, я получаю событие как

<button value="PHYSICS" class="button-blue"><img src="/static/media/magnet.d8028ed2.svg">PHYSICS</button>

Но когда я нажимаю конкретно на изображение, я получаю событие тега изображения как

<img src="/static/media/magnet.d8028ed2.svg">

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

Ответы [ 2 ]

2 голосов
/ 13 марта 2020

Похоже, вы используете event.target, чтобы получить элемент, по которому щелкнули. В этом случае цель не будет кнопка каждый раз, когда вы нажимаете. Это всегда относится к элементу, по которому произошло событие.

Я бы предложил вам использовать event.currentTarget, который всегда будет элементом, связанным с событием.

1 голос
/ 13 марта 2020

Вы нажимаете на изображение, поэтому изображение - это элемент, где происходит событие onClick. Это ожидаемое поведение, вы щелкнули изображение, а не кнопку, которая его содержит.

Чтобы предотвратить любые события щелчка, происходящие на изображении, вы стилизуете элемент изображения с помощью свойства CSS pointer-events:

pointer-events: none;

Это предотвращает любые события указателя (включая нажатия кнопки) на изображении, и кнопка теперь будет элементом, возвращаемым для события.

Если в вашей кнопке несколько элементов, она может быть проще стилизовать саму кнопку с помощью:

button > * {
  pointer-events: none;
}

Это предотвратит нажатие любых дочерних элементов кнопки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...