score:2

Accepted answer

it looks like you are using event.target to get the clicked element. in this case target won't be button every time you click. it always refers to the element got the event fired upon.

i would suggest you to use event.currenttarget which will always be the element which is bound to the event.

score:1

you're clicking the image, so the image is the element where the onclick event is happening. this is the expected behaviour, you clicked the image, not the button that contains it.

to prevent any click events happening on the image, you style the image element with css pointer-events property:

pointer-events: none;

this prevents any pointer events (click interactions included) on the image, and the button will now be the element returned for the event.

if you have several elements inside your button, it might be easier to style the button itself with:

button > * {
  pointer-events: none;
}

this will prevent any child elements of the button from being clicked.


Related Query

More Query from same tag