touchmove Event not firing on iPhone Safari - javascript

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.

Related

Why would my touchstart and touchend events not fire on Safari mobile?

Here is my app, running locally. My touchstart and touchend events fire correctly in the desktop Chrome mobile simulator, as well as on a friend's Android, but in Safari they do nothing. I have the viewport meta tag. It seems as though Safari is not registering as a mobile browser/device and, therefore, not registering touches.
Here is the file that I am working with the touch events. (It wouldn't format correctly here.)
(Swipe right to mark for deletion, swipe right again to confirm. Swipe left to mark complete.)

Why is the touchstart event not firing in Firefox?

I am trying to use the touchstart event to detect touches in a web application. It's working fine in Chrome, but in Firefox 36.0.1 (Desktop version) on Windows 8.1, the event is not fired at all.
Am I doing something wrong or is this a bug? A minimal working example can be found here.
Because according to the Mozilla reference page that event has been disabled in Firefox since version 24. See more information in this bug ticket.
I think this event hasn't yet been properly formalized in the standard. You might want to consider using other events like mousedown / mouseup

Detecting fullscreenchange does not work on some android devices

I am currently trying to use the <video> tag to, obviously, display videos. If the user clicks on the video (or poster image) it will trigger my script to set the video to fullscreen through the requestFullScreen method. When I exit fullscreen mode, I attempt to catch this by using a listener like so:
document.addEventListener('fullscreenchange', function() {
// This is never triggered, I never arrive here.
if (isFullScreen) { // do something}
else { // do something else}
}
I have similar listeners for mozfullscreenchange, msfullscreenchange and webkitfullscreenchange.
Now my problem is that for some android devices with some browsers, the listener is not triggered. For instance, on a Samsung Galaxy Note the listener is not triggered when using Chrome, while when using Asus Transformer with Chrome it works. However, if I use Firefox on the same two devices, it only works on Samsung Galaxy Note and not the Asus Transformer.
Is there a simple explanation to this inconsistency? Have I done something wrong? Is there perhaps some different events I should listen to on different versions of Android and browsers?
You have missed the last outter right parenthesis.
Also two curly brackets are commented away.

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.

Jquery touchend firing before finger is released

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.

Categories

Resources