I have an image inside a button, and I want to listen to clicks on the button.
Since the listener is on the button, then when the click is done on the img
, it won’t work:
document.addEventListener("click", (event) => {
if (event.target.matches(".my-button")) {
console.log('My button clicked')
}
});
button {
background: none;
color: inherit;
border: none;
padding: 1em;
font: inherit;
cursor: pointer;
outline: inherit;
background-color: #4681f4;
line-height: 0;
}
<button class="my-button">
<img src="https://cdn-icons-png.flaticon.com/128/483/483054.png" width="40" height="40"/>
</button>
So I have to add a second selector for the inner img
as well:
document.addEventListener("click", (event) => {
if (event.target.matches(".my-button, .my-button img")) {
console.log('My button clicked')
}
});
button {
background: none;
color: inherit;
border: none;
padding: 1em;
font: inherit;
cursor: pointer;
outline: inherit;
background-color: #4681f4;
line-height: 0;
}
<button class="my-button">
<img src="https://cdn-icons-png.flaticon.com/128/483/483054.png" width="40" height="40"/>
</button>
But that feels redundant and as if I am doing something wrong.
Is there a way to avoid this? I was thinking at first to just use the img
without a button
element, but that feels like not according to the spec.