TouchScreen Laptops issue

[mirsadkosumi]

I'm implementing TouchSwipe for an image slider. And I am having this issue on TouchScreen Laptops, TouchSwipe doesn't recognize the mouse clicks or swipes, only touch taps or touch swipes are taking effect. Same problem also while trying your demos - http://labs.rampinteractive.co.uk/touchSwipe/demos/index.html Issue is being tested on Windows 10 with Chrome Version 62.0. (64-bit) and with Firefox 57.0 (64-bit), - while on Edge 41.1 it works perfectly just like it should.

Thanks in advance for your time :)

[cmnstmntmn]

@mirsadkosumi did you manage to solve this issue?

i'm facing a similar problem with custom scroll while running FF 57; and apparently, none of these plugins work anymore https://www.sitepoint.com/jquery-scrollbar-mobile-devices/

[mirsadkosumi]

@cmnstmntmn Not really, had just to leave it like that for the moment. Please let me know if you find any solution. Regards.

[acwolff]

Still not solved in the latest version, try this demo page on a laptop with touch screen, Widows 10, Chrome.

[melloware]

Change this line...

SUPPORTS_TOUCH = 'ontouchstart' in window,

to...

SUPPORTS_TOUCH = ('ontouchstart' in document 
  || 'ontouchstart' in window 
  || window.TouchEvent  
  || (window.DocumentTouch && document instanceof DocumentTouch)
  || navigator.maxTouchPoints > 0 
  || navigator.msMaxTouchPoints > 0),

That contains detection for Lenovo touchscreens, Chrome 70+, IE, and Firefox.

[justinputney]

I didn't have luck changing the SUPPORTS_TOUCH line. The challenge is that Windows machines allow both touch and click events. Changing the SUPPORTS_TOUCH line made touch swiping work, but broke click swiping for me.

After much experimentation, I managed to get both working at the same time: https://github.com/justinputney/TouchSwipe-Jquery-Plugin

I simply doubled up the pointer events with touch events, e.g. START_EV = useTouchEvents ? (SUPPORTS_POINTER ? (SUPPORTS_POINTER_IE10 ? MSPointerDown' : 'pointerdown touchstart') : 'touchstart') : 'mousedown',

[melloware]

@justinputney submit a PR with your fix please!

[justinputney]

@melloware done.

[justinputney]

I'm finding that the end event is not triggering in my code, so swipeStatusfires, but swipedoes not when touching the screen on Windows. Working on it now.

[justinputney]

Another issue I'm seeing is the threshold. Touch gestures on Windows register much smaller move distances. I'm seeing values like 16, when the same swipe with the mouse pointer registers as 221.

Also the touch distance seems to range from 15 to 19 no matter how far I swipe.

[justinputney]

Also, for some reason when using a touch gesture:

$element.on(END_EV, touchEnd); //this doesn't work
$element.one(END_EV, function(e) { touchEnd(e); }); //but this works

[justinputney]

Would love to get your input on these items, @mattbryson as you're much more experience than I am.

Is there a way to normalize the touch gesture distance?

For now, I'm just going to set the threshold to 15 on Windows devices.

[michael-pure]

Steps to resolve (in my case) and maintain history of patch:

1. Download 1.6.19 release zip from here https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/releases (you need the most recent code... prior versions may not operate the same)
2. Rename jquery.touchSwipe and jquery.touchSwipe.min to touchswipe-1.6.19.js and touchswipe-1.6.19.js.min , respectively, and place them in a vendor folder where you'll leave them untouched.
3. Copy the files as is to touchswipe-1.6.19-patched.js and touchswipe-1.6.19-patched.js.min (to your project JS folder or vendor folder... your call)
4. In touchswipe-1.6.19-patched.js A) increment top version to 1.6.19 (it was missed) and B) apply the fix from @melloware above (thanks!) and C) once you're done testing apply the same patch to the touchswipe-1.6.19-patched.min.js file and test that.

Note: If it doesn't seem to be working, A) try adding threshold: 10 (not 0, which seemed to cause some side effects in our UI) B) ensure you're doing a "hard refresh" before every test. Check Chrome's network console and source viewer.

Using some variation of the above, either as stated or in consecutive git commits to your main touchswipe file, you have a decent shot at getting this working and tracking the change so anyone knows what happened and doesn't lose it over time. (using comparison tools, the original can always be compared to the patched version)

Hope it helps! Good luck!

PS If you're having problems with swiping on your elements in general, try this...

$('#id').find('*').addBack().swipe({
    swipeLeft: function () {
        // Do stuff
    },
    swipeRight: function () {
        // Do stuff
    }
})