marcandre / detect_swipe Goto Github PK

Google recommends using what they call "passive listeners" for touch handlers on mobile devices, to improve scrolling performance.

https://developer.chrome.com/en/docs/lighthouse/best-practices/uses-passive-event-listeners/

So I think the plugin code should be changed to use this:

document.addEventListener('touchstart', onTouchStart, {passive: true});
etc...

The vast majority of mobile devices used today support this, and those who want to support other devices could detect if the browser supports it if needed.

I think it is quite problematic that it isn't possible to choose whether the default swipe action should be prevented or not. What if I want to listen to the swipedown event on the document element to hide the mobile navigation when the user scrolls down? What about parallax scrolling for touch devices, where the scroll/swipe event is used to check the current scrolltop and load or modify content based on the page offset? At the moment all this is not possible, as the plugin prevents regular scrolling completely. The touchWipe plugin, which this one claims to be based upon, considered this and offers the preventDefaultEvents parameter. It would be really great if this plugin would not prevent everything by default, but would leave it to each actual event Listener to stop the event from bubbling up further or not, using proper jQuery syntax like this:

$(document).on('swipedown',  function(event){ event.preventDefault(); /* ... */ });

This would just feel natural to any jQuery developer and opens up lots of possibilities where there were serious limitations before.

Best regards,
Stefan

I would like to put a transparent overlay layer over my page, and my page has buttons, links and other clickable objects it it.

I would like swipe gestures to be detected (by the transparent overlay layer), but at the same time, I would like all the touch events to be propagated also to the other layers, so that my buttons and links still work.

Would it be complicated to add an option to do that?

The plug-in prevents Firefox mobile from scrolling page vertically when vertical swiping.

Interestingly other browsers still do the scrolling (which means of course that vertical swipes are not detected correctly by this plugin).

But in my case-use, i just want to detect left-right swipes, and I want up/down swipe to scroll the page, i.e. the default behavior.

My way to fix this was:

1. remove the call to e.preventDefault() in onTouchMove().

2. add "return true" at the end of each event handler, so that the default processing occurs.

This fixes the issue with Firefox mobile that was preventing vertical swipes from scrolling the page.

However, I did not try to fix the opposite problem with Chrome, i.e. for people who want to prevent the default page scrolling action while swiping vertically, because in my case I want the default page scroll to occur in that case.

The code works well except that it incorrectly detects swipes when the user does a pinch gesture (to zoom-in / zoom out the display). So there should be some code that detects that the use is using a two fingers gesture, and it should not trigger in that case.

I have a photo site the uses your swipe-left/right code to navigate between photos, but it is now basically impossible to zoom on a photo without triggering a swipe, which goes to another photo.

Do you think this is easily fixable?

Hi, thanks for a simple lib! https://github.com/noelboss/featherlight got me here.

My JS workflow relies on NPM though, so it would help me a lot, if I could find detect_swipe there. Would you consider a npm publish?

Thanks again, P!

All my devices are showing them flipped. If dy is positive (start position is greater than end position), the swipe would be "up", wouldn't it?

https://github.com/marcandre/detect_swipe/blob/master/jquery.detect_swipe.js#L38

Basically if I want a fixed sidebar that you swipe left/right to slide out and back in again and I use the body as the swipe target it prevents you from scrolling the page except when you start the drag from a container element.

If you instead try swiping down or up on an element with content in such as an img or a p tag it prevents default entirely and doesn't let you scroll down.

The way around this for me was to disable the prevent default global setting, but then that introduces some unwelcome left/right page movement when trying to open the sidebar.

Is there a way of preventing default for just up and down swipes with your settings? Or will I have to do so manually?

Good day,
I really love your simple plugin, however when i make "preventDefault: true", it prevents the vertical scrolling of my page. I only want to use the plugin for left and right swipe. How do i do that while allowing the page to scroll up and down as normal webpage. Thank you