Вы нажимаете на изображение, поэтому изображение - это элемент, где происходит событие onClick
. Это ожидаемое поведение, вы щелкнули изображение, а не кнопку, которая его содержит.
Чтобы предотвратить любые события щелчка, происходящие на изображении, вы стилизуете элемент изображения с помощью свойства CSS pointer-events:
pointer-events: none;
Это предотвращает любые события указателя (включая нажатия кнопки) на изображении, и кнопка теперь будет элементом, возвращаемым для события.
Если в вашей кнопке несколько элементов, она может быть проще стилизовать саму кнопку с помощью:
button > * {
pointer-events: none;
}
Это предотвратит нажатие любых дочерних элементов кнопки.