body click event triggering before element click event

Question

Here as in image showing the click events bound to a particular element.

The a.interstitial handler is attached using jQuery. The body handler is attached using addEventListener() (I think, that code is obfuscated and hard to read).

I would like to cancel the "body" event handler execution in my "a.interstitial" handler, but I can't because for some reason the body handler always runs first. This is contrary to my understanding of how event bubbling works. Shouldn't the more specific ("a.interstitial") handler be run before the body handler?

Answer 1

As you mentioned body is registered through addEventListener. Can you check in addEventListener call if the third argument is set to true. If so it will be dispatched to the registered listener before being dispatched to any EventTarget

Refer https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

In this case, body function gets executed first then the click action of anchor takes place.