Close button (backdrop) > double click/touch

[sfritzsche]

We have included the very beautiful library in one of our projects. During the closing tests we noticed that when you close the menu, the area below the close button is also clicked. After analysis, we found that there are 2 events on the close button:

this.backdrop.addEventListener("touchstart",o,{passive:!0})
this.backdrop.addEventListener("mousedown",o,{passive:!0})

Where the obect "o" in this case is an anonymous function that contains the following commands:

n.close()
t.stopImmediatePropagation()

(Minimized version).

In our tests via Browserstack (test platform with real mobile devices) on iPhone 13 with iOS 15 & iOS 15.5 and via Firefox with simulated mobile screen size (iPhone 11 Pro, iOS 14.6, 375x812) the following was shown:

If you click with the mouse exactly once on the close button, the mmenu closes and the area below it "gets" a click as well.

The reason is probably that in this case both events are triggered. The simulation of the touch event (touchstart) first closes the menu, whereas the actual click then lands on the element below. The intention behind "stopImmediatePropagation" is probably to prevent exactly this. However, the third parameter of "addEventListener", i.e. the option "passive:true" ensures that the second event (mousedown) is not stopped.

doc, option passive:

A boolean value that, if true, indicates that the function specified by listener will never call [preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault).

The documentation only talks about preventing "preventDefault", but our tests have shown that the second event is prevented as soon as you set "passive:false" and additionally add preventDefault() to anonymous function. Which means that the click no longer lands on the underlying element.

[FrDH]

Hi,
Thank you for digging into this issue.
To be honest, I think the eventlisteners should not be passive at all. Quite the opposite actually.
(I don't think I've ever needed passive event listeners other than on a scroll event 🙂 )

I'll have a look at it later on.