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

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.

Related

Why is the onauxclick event triggered in a different way in google chrome browser?

So i developed a web app and i used onauxclick on a functionality. When i went to test it on firefox browser it all went perfectly. I tested it with google chrome browser and the onauxclick event handler wasn't working when pressing down the mouse wheel. After few more testing i was able to make it work by selecting the text and pressing the right mouse button (without leaving the selected text). So i was wondering, how does it work differently on google chrome browser and windows 10?
While the different browser vendors try to stay as close as possible to the W3C standards when implement HTML and JavaScript features, they do tend to sometimes introduce minor differences between implementations or even not implement some stuff at all.
The feature you are trying to use is at the moment experimental and not supported on Safari and Safari iOS. Expect it to change a bit until it is finalised and released.
More details here:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onauxclick

How to trigger MacBook trackpad haptic feedback on a website?

I'm writing a web application with a lot of drag and drop functionality and I want to enable haptic feedback (when possible, using macOS 10.11+ with a Force Touch trackpad) for actions like "snapping in" while dragging items.
Is this possible (I know it's impossible to support every platform, but at least when hardware supports it)? I've tried navigator.vibrate with different time values/patterns but it doesn't seem to do anything even if it returns true.
Should work with the Force Touch events, one of which is webkitmouseforcedown
someElement.addEventListener("webkitmouseforcedown", myFunction, false);
You can read more about this and the other events here
Please note that this will work only on Safari unfortunately

Deprecated touch operations on mobile apps

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

Comment box in qTip disappears onfocus for IE/Edge browser with touch devices

I am making use of an external JavaScript library qTip. My application has a feature of 'StarRating' and 'Comments', which is provided through this plugin.
After providing a rating through the stars, one can enter the Comments(optional), which opens up in a dialog.
This scenario works well across all the major browsers i.e. Chrome FF and IE but not in IE (touch devices) and Edge browser (touch devices). As soon as the stars are clicked and on focus inside the input box, the dialog box disappears in the touch devices with IE and Edge only, but works well in Chrome and FF (touch enabled).
I don't know whether there is an issue with the library or with the touch events.
Microsoft Edge doesn't support touch events by default. It has an alternative system called pointer events. Sometimes 3rd party libs implement touch based widgets that don't play well with pointers. A quick way to determine if this is the case is to switch on touch events inside of Edge. Put about:flags in the address bar then go to the setting enable touch event and change it to always.
If the site now works, then I suspect it's an issue with the library. If that is the issue then I'd raise the issue with qTip they can probably help identify the issue specifically so that it can be fixed in the library.

Events to bind to in mobile devices

I have a simple query:
My web application allows users to use keyboard shortcuts like Ctrl-X etc. to invoke events that require fast input and action e.g Aborting an action that was just carried out quickly.
I am aware of the events to bind to in js for desktops.
However, while I am aware of the tap events and events available for both desktop and mobile browsers (keypress etc.), I would like to ask your opinion on what events could be bound to specifically in mobile browsers, such as muting, volume up/down. The answers I found in Google were archaic and not very cross-browser compliant
So simply put, are there any events, for actions by the user, specifically for browsers on mobile devices that can be bound to, in the event that using click and tap events are too slow or cumbersome?
JQM by itself cannot access the buttons on the phone, if you want to do that you'll have to write additional Java code to access the buttons through the original Android API.
Or, you could use Phonegap: http://docs.phonegap.com/en/2.0.0/cordova_events_events.md.html#Events
Check it out, you can use the "volumeup" or "volumedown" events.
As far as I know, the best you can get is the touch events.
Take a look at http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html for iOS, not sure if the same documentation exists for android/BB.
It seems odd for a web app to override the default behavior of heavily OS involved physical buttons on the device, like volume/power/home buttons, as the user would experience abnormal behavior which would be confusing to the average user. I doubt it is possible to intercept them in a web app.
EDIT: This specific link has a list of iOS web events you can listen for in a table at the bottom:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1

Categories

Resources