"click" vs "mouseup" in an event listener (custom activity map implementation)

Hey @franc_g 

and your event listener is custom and not a built-in click event?
Could it be that the click is not bubbling and captured by the element itself i .e., in the component's custom click handler?

That could explain why the mouseup still works if the event propagation is working there.

I would reach out to a developer about that and ask him if they explicitly stop event bubbling / propagation

Hi @franc_g ,

Yes, this is a known behavior. When working with Shadow DOM elements, the "click" event often doesn’t work as expected in external event listeners due to event retargeting and the encapsulation that Shadow DOM enforces. In many cases, "mouseup" propagates more reliably across shadow boundaries, which is why you might see it working better especially in custom implementations like Activity Map.

Some recommendations: 

Use mouseup for Shadow DOM elements:

If it works and suits your tracking goals, it's a valid and simple workaround.

Delegate Listener inside Shadow DOM

If you have access to the shadow root:

shadowRoot.querySelector('button').addEventListener('click', function(e) {
// track click
});

@bjoern__koth @pradnya_balvir @vinay_chauhan 

Thank you for the suggestions—exactly what I needed! I was, and still am, a bit hesitant to change the event type from "click" to "mouseup" in the custom activity map, but you’ve given me all the information I need. Much appreciated.

Additionally, I’ve discovered an easy way to test whether this issue is related to event bubbling (see below).

By tweaking the options parameter in the listener, we can quickly determine whether the event type bubbles or not.

• If true, the event listener is triggered during the capturing phase of event propagation.
• If false, the event listener is triggered during the bubbling phase (default).

Event propagation in JavaScript consists of three phases:

1. Capturing Phase: The event travels from the root element of the DOM down to the target element.
2. Target Phase: The event reaches the target element itself.
3. Bubbling Phase: The event bubbles back up from the target element to the root element.

By default, most event listeners in JavaScript respond during the bubbling phase, but you can also configure them to respond during the capturing phase.

document.addEventListener('click', function () {
    console.log('Capturing phase');
}, true); // Capturing phase

document.addEventListener('click', function () {
    console.log('Bubbling phase');
}, false); // Bubbling phase (default)

Upon multiple interactions with the shadow DOM element I get the following log.