Change click eventListener timing on elements outside offcanvas

[GeoSot]

On initialization the offcanvas registers click listeners.
Although it was good for simple buttons, if a button contains another element and user clicks on this, the click seems that through delegation, is triggering two times, so the offcanvas instantly toggles itself

Closes #33457

could be fixed by #33545

[alpadev]

I think you can keep your current implementation but you'd have to add event.stopPropagation() to this event handler. The delegation event handler work on the capturing phase while the handler you're using to check for clicks outside is a regular event handler that works on the bubbling phase.

What happens is that a click event in the capturing phase initializes the offcanvas (that happens while the capturing is at the document) and adds the bubbling phase handler. After that, the event continues to propagate through the DOM to your button (or the image) and bubbles back to the document and there it triggers the event handler you just added. That handler checks for the event.target that in case of an image can't get a valid target (since the image doesn't have the data-bs-target attribute) so the first part of the if condition is true because the image isn't in the offcanvas and the second one is true because target (null) !== offcanvas._element.

Hope that explains the behaviour.

[GeoSot]

Your explanation is precise, and your solution seems valid too :)

The only reason I chose not to put event.stopPropagation() ,is to allow other listeners to work.
As I can recall we had an open issue on this, during the previous days.

[alpadev]

Well nvm then 😊

I thought I would explain the behavior in more detail, just in case there were any questions left.