brutaldesign/swipebox

Chrome mobile v62 Touch event on close button propagates up

Opened this issue · 3 comments

Sorry for my English.

When i click close button on mobile device in Chrome 62, event bubbles up and click happens on element under popup.

It's can be fixed by adding:

event.preventDefault();
event.stopPropagation();

in $('#swipebox-close') click/touch event handler

event.preventDefault() won't work in chrome 56 or higher because they have implemented passive event listeners by default which will ignore all calls to preventDefault()

https://developers.google.com/web/updates/2017/01/scrolling-intervention
https://www.chromestatus.com/features/5093566007214080

This of course will need to be fixed with something similar toaddEventListener("touchstart", func, {passive: false} );

Whereas I believe the code for swipebox uses a jQuery .bind("touchstart") and has no argument for enabling/disabling passive event listeners via the api.

jquery/jquery#2871

Here's a video of the issue using the swipebox site as of today. (I had pressed escape to close the lightbox in this video) - but should give a better idea of what's happening.
https://drive.google.com/file/d/1DDCiO2IgCyJjp5FhCXWGuDdWpd7F2KAA/view

jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ){
        if ( ns.includes("noPreventDefault") ) {
            this.addEventListener("touchend click", handle, { passive: false });
        } else {
            this.addEventListener("touchend click", handle, { passive: true });
        }
    }
};

it removed the errors for now from chromium Version 84.0.4147.105 (Official Build) Arch Linux (64-bit)
line 587: jquery.swipebox/src/js/jquery.swipebox.js for event: touchend click
from here: https://stackoverflow.com/a/55461632