benmajor / jQuery-Touch-Events

A collection of mobile event plugins for jQuery.
MIT License
699 stars 225 forks source link

Can't trigger long taps on Surface Pro #166

Open mhmxd opened 4 years ago

mhmxd commented 4 years ago

Firstly, thanks for the plugins!

But I encountered this issue of tapend or taphold not getting called when touching on my Surface Pro, on neither Chrome nor Firefox. When I click with mouse or hold the click, the events are called with no problem. but when touching, only quick tapping fires tapstart/tapend/taphold and holding the touch triggers none of them.

What do you think is causing this?

benmajor commented 4 years ago

Can you please send me the user agent that you're using? I suspect it could be an issue with the touch detection.

Do the other events function as expected? In particular, I'd be interested if tapstart, tapend work.

mhmxd commented 4 years ago

The user agent for Firefox: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0

Chrome: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36

Yes, the tapstart/tapend work when I click or click and hold, also when I tap with finger. But when I touch and hold with finger, none of them works. Nothing is shown in the console.

mhmxd commented 4 years ago

I just checked, jQuery Mobile has the same exact issue.

benmajor commented 4 years ago

Interesting, I can't seem to replicate it by changing the UA alone, so I think it must be something in the Surface Pro sandbox. Can you do me a favour and try using the unminified code in this commit:

https://github.com/benmajor/jQuery-Touch-Events/commit/f09999d8fb9f78f6675a9306c3ad10eff919c095

It basically reduces the threshold for taphold down to 500ms, instead of 750. If that improves the behaviour, there's obviously some native event going on that needs to be cancelled first.

mhmxd commented 4 years ago

I tried that code and no difference. The same behavior.

mhmxd commented 4 years ago

Correction to my previous comment: I got it working with jquery mobile (v. 1.4.5) and jquery v.1.11.3 (lower version due to compatibility with jquery mobile).

It doesn't have tapstart or tapend, but tap and taphold both work with finger, as well as mouse click.

benmajor commented 4 years ago

It appears that holding a touch on the Surface Pro actually selects the element. As such, I don't think it's actually a fault with the library, you just need to prevent the default action. Can you see if the following works:

$(element).on('touchstart', (e => { e.preventDefault(); }));
$(element).on('taphold', function(e) { });
mhmxd commented 4 years ago

Unfortunately, that didn't work. It seems though the preventDefault() takes effect, as the button I have on the screen loses the "pressing" state. But the functions still don't work.

I did some testing with Touch Events in JS and interestingly, they all work perfectly. Even without the preventDefault(). The touchstart, touchend, touchmove all get triggered, and only by the touch (not the mouse click).

I also tried to combine the two with something like this: (though not sure it is even permissible)

function handleStart(e){
    e.preventDefault();
    console.log("touchStart");
}

$("#clickButton").on("taphold", function(e) {
    console.log('taphold');
});

but this also doesn't work. Only "touchStart" is shown in console.