Jquery touchend firing before finger is released - javascript

I want to do Two things...do something when we touch the screen and when we release finger from screen..But touchend function below triggers alert box even before i release my finger.Where i am wrong ?
$(window).on('touchend', function(e){
alert("finger released");
});
$(window).on('touchstart', function(e){
//touch started
});

This is actually a known bug in webkit. Try to use touchmove instead if it suits your needs, or touchcancel is sometimes fired in place of touchend. BTW it works fine on Firefox (on Android at least, I don't even know if FF exists on iOS).
EDIT
What you can do also is playing around with preventDefault(); on the touchstart event, but as it said by it's name, it prevents the default behavior, so once again, it depends on your needs.

Related

touchmove Event not firing on iPhone Safari

Does the touchmove event NOT work on the iPhone's Safari browser?
I'm not talking about an iOS App, just a regular old HTML page with some Javascript and jQuery that's loaded into the iPhone's Safari Browser.
I actually connected my iPhone to my Mac-mini - which is also running Safari, so I can see everything that's happening on the iPhone in the Mac-Mini's Safari console - and my touchstart and touchend events DO fire, but touchmove just does NOT respond.
Here's the code:
document.addEventListener("touchstart", onMobileTouchStart, false);
document.addEventListener("touchmove", onMobileTouchMove, false);
document.addEventListener("touchend", onMobileTouchEnd, false);
function onMobileTouchStart(touchStartEvent) {
console.log("\n==>'onMobileTouchStart'!!!");
touchStartEvent.preventDefault();
}
function onMobileTouchMove(moveEvent) {
console.log("\n==>onMobileTouchMOVE'!!!");
moveEvent.preventDefault();
}
function onMobileTouchEnd(touchEndEvent) {
console.log("\n==>onMobileTouchEnd'!!!");
}
What I'm ultimately trying to do is get a custom pinch-zoom type behavior going, and my understanding is that this has to be implemented in the touchmove event - so that's why I'm asking.
I can't see any other way of tackling this unless touchmove starts playing nicely.
Any thoughts, tips or workarounds for this?
I see the same problem in May 2021. I get the touchmove events just fine if i try it on Google Chrome, but Safari, on 14.4.2 (latest version), the Safari browser gives me the initial touchdown event, but subsequent touchmove events are not being fed to me.
Clearly the browser is stealing the touchmove event, because it wants to scroll something, and as usual scrolling is fouling up everything, because it is one of these things that HTML / JS spec doesn't really cover, as it is magical browser behavior.
I have a overflow:hidden on my body tag, so there shouldn't be any scrolling anyway. Not sure how to fix this browser quirk, since the iPad is a massively popular device, i must figure out how to fix it, but i am baffled at the moment.

Prevent text selection on tap and hold on iOS 13 / Mobile Safari

Tapping and holding on a DIV causes Safari to select (i.e. highlight) the surrounding text and the phone to vibrate, even if this DIV has a user-select property set to none. This is very annoying in the context of my app. It seems to be specific to iOS 13 and its Haptic Touch.
I tried to e.preventDefault() on the touchstart event and it worked, but at the same time disabled scrolling capabilities.
I also tried to e.preventDefault() on the webkitmouseforcewillbegin event, as recommended in the Apple documentation, but this didn't work at all.
Anyone knows how to fix this?
Video: https://youtu.be/SstDm0M8RN0
Calling event.returnValue = false; from all touch events (touchstart, touchend, touchmove, touchcancel) prevents from the surrounding text selection.
Here is fiddle: https://jsfiddle.net/j_u_l_e_e/yLdt1s4o/

Triggering action if user canceled touch on mobile device

I have a situation where I need to track if a user has cancelled a touch on a mobile device. I thought it would be pretty easy with touch events, but I've been stuck on it for two days now. Here's what I've been experimenting with:
$("#element)
.bind('touchstart', function() {
action1();
})
.bind('touchcancel', function() {
action2();
})
.bind('touchend', function() {
action3();
})
touchstart and touchend work fine, but touchcancel never runs. Even if I release my finger outside the element, the touchend action will run but not touchcancel.
Have you tried dragging your finger off the edge of the display panel? That used to cause a touchcancel on older android phones.
Edit: The touchcancel happens when the system needs to cancel the touch so you might experiment with application- or OS-initiated behavior that could interrupt what the user is doing. Some examples that might cause this
Receive an onscreen notification, like an incoming call
Modify the dom so the element that was the focus of the touchstart is rerendered in a different location
Remove the dom element that was the focus of the touchstart

preventDefault() for touchstart handler in Firefox not working - Pure Javascript

I would like for a button to react to 'touches' on a touch screen, and 'clicks' on a non-touch screen. In case of a touch screen, I only want the touchstart handler to direct my flow and prevent the system from further handling the click event.
For this, I added two event listeners to my button. One listens for touchstart events. Once a touchstart has been detected, it uses event.preventDefault() to cancel the click event.
The code below on a touchscreen in Chrome, Opera and Android browsers achieves the desired result:
- one alert saying "touch".
However, in Firefox both events are detected, in spite of the preventDefault() in the touchstart handler:
two alerts... first one says "touch", followed by a second alert saying "click".
lginButton.addEventListener('touchstart', function(event) {
event.preventDefault();
alert("touch");
}, false);
lginButton.addEventListener('click', function(event) {
alert("click");
}, false);
Why is this happening and how can I achieve the desired results in all browsers?
I am currently unable to test. But based on your feedback it appears that Firefox is in fact not following the spec on events found here. I was about to find 4-5 bug logs on Mozilla that discussed this very topic, and finally found one that resolved the issue here https://bugzilla.mozilla.org/show_bug.cgi?id=977226. Definitely check to make sure you have the current version of firefox. And if you do it may be worth opening a new bug with mozilla on this. In the meantime you can set up a conditional inside of your touchstart event handler that detects the event type and handles touch and mouse events differently.. And then further adding more conditionals within you click conditional to handle browser and OS version. which is super bad practice, but would keep you going until a patch was implemented.

Autorepeat held button on webpage on Android

I have a page that autorepeats a button when held. On mousedown it begins an interval and on mouseup it stops. It works flawlessly on my computer. However, it doesn't do anything in Android. Is there something you have to set for Android to allow repeating?
It might be that you need touchstart and touchend events instead. Here is some documentation on MDN

Categories

Resources