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.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener: _"Events that are bubbling upward through the tree will not trigger a listener designated to use capture."_ https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event: _"Bubbles: Yes"_ — CBroe, Nov 12 '21 at 12:51

KooiInc · Answer 1 · 2021-11-12T12:54:38.693

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>

Thank you that works, but why does capture not work in my example, is it not supposed to traverse all parents of the event.target with the event handler? — run_the_race, Nov 12 '21 at 12:46

score -1 · Answer 2 · answered Nov 12 '21 at 14:12

-1

here you have double equals sign

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

there only has to be one and it works

(event.target.id = "BUTTON")

answered Nov 12 '21 at 14:12

Ruri

1
2

The double equals is for testing equality. Single equals is for assigned the value. I am trying test if the element is a certain element, not set the element that was clicked to be a certain value. By assigning the value, you are setting anything that is click on to have the ID of BUTTON, which is incorrect. – run_the_race Nov 12 '21 at 14:25
@Ruri It may run, but not as expected. This is really *not* the solution. – KooiInc Nov 12 '21 at 18:31

Javascript useCapture click event handler not triggering on button with image

2 Answers2