Deprecated touch operations on mobile apps - javascript

In past mobile apps that I developed, I found that the click event did not work as expected in all devices (for example: in games in which the user had to tap/click quickly on the screen, instead of triggering the click event, the double click was triggered), and using touchstart gave better results for what I wanted.
Since then, I started listening to the touchstart event instead of click; but testing on Chrome, I got the following warning message in the JS console:
Performing operations that require explicit user interaction on touchstart events is deprecated and will be removed in M54, around October 2016. See https://www.chromestatus.com/features/5649871251963904 for more details.
I visited the linked page (and the links inside it) and it seems that this new behavior is to avoid certain unwanted actions, and in particular to avoid third-party iframes or ads (my app has none) from opening pop-ups. I tried changing the event to touchend (as one of the links stated "The touchend event will continue to behave as before"), but got a similar warning message.
And my questions:
Is this something that only affects Chrome, or will it affect my web apps (with Cordova/Phonegap) for Android and iOS?
What event should I use to replace touchstart and avoid the issues I faced in the past? I could go back to click, but fast clicking/tapping would still be a problem.

When creating Cordova app, you target different OS versions, Android 5 and up has auto updating webview based on Chromium, so that problem will probably affect your apps.
But since Chrome 32, when using this viewport <meta name="viewport" content="width=device-width">, the click delay should go away (see this article), so you could safely use click event. Latest webviews on android 5 and 6 are based on Chromium 52.
You can also use fastclick library that will "fix" the click delay only where it's necessary

Related

iOS tel hyperlink javascript tracking in Google Analytics

I have some js code to record outbound link click events in Google Analytics, which effectively adds a delay to the click event before allowing the normal click behaviour to go through.
This applies to both http as well as tel: links. I trigger a specific "phone number has been clicked" event in GA so we know the user intended to make a call (whether or not they go through with it is a different issue entirely).
The number of events being tracked into GA seems strangely low and with anecdotal testing, many deliberately triggered events don't seem to show up in GA (I.e. I sit on my phone and press the link a few times).
I wonder why this could be.
Does iOS do something weird to immediately halt or bypass my javascript when a tel: link is clicked? If not, what could explain the lack of event tracking going on here?
For context, I'm talking about tracking the click event before the call prompt comes up:
i had the same issue (working with jquery) and found out that it occurs when i tried to recognize the tap with jquery click handler.
i found a solution with adding
jquery.on("click touchstart", function(e){...});
now it works fine again on desktop and mobile/touch browsers (tested on newer ios and android devices) and the call-prompt is displayed immediately.

Google Maps touch events not working on mobile devices

I'm running into an issue where touch events do not work, but click events do.
If you visit Google's Javascript Events page, you'll notice that click events work and so do drag events. Now, in Chrome, use the device tool to change to an iPad. Without refreshing, try to drag and swipe around. It won't work. Normal click events will still work. Now refresh the page while in iPad device view. The touch events will work.
Our issue is that we're always stuck with the touch events not working, even on touch devices.
Actually, there are already two related Issues #6425 and #4599 reported in gmaps-api-issues.
And, based from the threads, these issues are not fully resolved yet. There are, however, given workarounds which you can also try and one is available in GitHub - googleMapsAPITouchWorkaround.
For more of the workarounds, please go through the issues recorded in the tracker.

Why are select events not firing in iOS?

I have built a website that uses some simple JavaScript. I make use of many events throughout the website such as the input and submit event for validating and processing a contact form, the focus event for some form-related things and a dynamically-created tab interface, etc. I register all of these handlers using element.addEventListener("event", handler).
My JavaScript works wonderfully everywhere that I have been able to test (Firefox and Chrome on Ubuntu; Firefox and Chrome on Android), except for on iOS devices (regardless of what browser is used), where it seems that very few events are being fired.
It has been difficult for me to debug what the issue is on iOS devices because I do not have an OSX computer to connect an iOS device to so that I can use the remote console. I have come to the conclusion that the events are not firing for a few reasons:
The contact form on the website is being submitted even though I make a call to event.preventDefault() in the form's submit event handler, and do not explicitly submit the form anywhere after that.
I have tried catching any errors and displaying them in an alert like so:
window.onerror(function(err) { alert(err) })
to no avail (i.e. no errors were caught).
I have adapted all my functions to make use of only the click event, and then they work perfectly!
The last point is a possible solution to the problem, but I think it is bad practice to adapt all my work to one specific platform and rely only on a single event when there are so many purpose-built events that can be used and that are supposedly supported by iOS in the first place.
Why are so many events not being fired on iOS devices?
The problem was actually that I had made a const declaration in strict mode, which is, according to caniuse, not recognized in the current versions of both Safari and iOS Safari (9.1 and 9.3, respectively, as of writing).
I have better documented this problem in another question and answer.

Javascript on mobile sites: Is it OK to use click?

I'm creating a mobile version for my sites, and I was wondering: is it ok to keep all the click events in the javascript as they are, or should I change it to tap (for example tap.js)
I've noticed that click works in all the browsers that I tested (Native, Dolphin and Chrome on Galaxy S2). Do you know of any issues in keeping the click events?
Mobile browsers are designed to work with most sites out of the box, thus they implement the click event just as desktop browser.
However, as Torsten Walter explained you might induce a noticeable delay if you don't explicitly manage the tap events.
To make it short : click will work but managing tap too will improve touchscreen user experience.

How to detect mouse click and hold in Android browser?

I am writing a webpage that is intended to be viewed on Android phones and hopefully other mobile devices. I am going with a webpage as opposed to an App because it is more platform independent.
I would like to perform an operation continuously while the uses is clicking and holding a button on the webpage. On mobile device the operation would run continuously when they hold their finger on the button on the webpage.
I have tried using the javascript function setInterval() on the onmousedown event of my input button and clearInterval() on the onmouseup event. This works perfectly when accessing the device from any browser on a PC. Unfortunately, it doesn't work on my Android phone. The button appearance does seem to change to the held state when pressed and held but the onmousedown event doesn't get called.
Has anyone found a good way to do press-and-hold button actions that is compatible with Android devices?
Check here:
What DOM events are available to WebKit on Android?
and here:
Quirksmode.org/mobile
Seems that you need to use some of the DOM or touch handlers (last one may have problems when using trackbal)

Categories

Resources