Javascript useCapture click event handler not triggering on button with image

Question

I encounter this a lot, and normally fix it with a hack by adding the style "pointer-events: none" to the children of the button. However once and for all I would like to understand why this code does not work.

For example this answer says:

Example <div> <ul> <li></li> </ul> </div> In the structure above, assume that a click event occurred in the li element.

In capturing model, the event will be handled by the div first (click event handlers in the div will fire first), then in the ul, then at the last in the target element, li.

If I try the quoted example above, all I ever see is the <li> event handler occuring, not one for the <li> and <div>

Say I have a button with an image. If one clicks the button, its runs the event handler, if one clicks the image on the button it does not run the event handler. Okay that is understandable, except I have specified useCapture = true in the event handler, so I expect the event handler to start capturing at the root html element, and work its way down to the actual element that was clicked (which is interrupted by the preventDefault() below)..

 function working(event) { if (event.target.id == "BUTTON") { alert("Its working!") event.preventDefault(); } } document.addEventListener('click', working, true);

 <button id="BUTTON" type="button"> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"> Works on text but not image</button>

I keep reading about bubbling vs capture, and I think I understand it, but clearly I don't because the code I write doesn't work.

Answer 1

This is because you use event delegation, so the capturing is done on document . useCapture makes no sense here.

One solution is to use closest on evt.target to retrieve the first parent with id #BUTTON and act on it.

See also

 function working(event) { if (event.target.closest("#BUTTON")) { alert("Its working!"); } } document.addEventListener('click', working);

 <button id="BUTTON" type="button"> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"> Works on text but not image</button>

Another solution is to add the listener to the element itself (using [useCapture = ]true ). In that case the capturing starts on the element the event listener is added to.

 function working() { alert("Its working!"); } document.querySelector(`#BUTTON`).addEventListener('click', working, true);

 <button id="BUTTON" type="button"> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"> Works on text but not image</button>

Answer 2

here you have double equals sign

(event.target.id == "BUTTON")

there only has to be one and it works

(event.target.id = "BUTTON")