Using touchstart and/or click (mousedown) Angular 6 - javascript

Issue:
I have a problem where in the whole application where click event is used. The app will be used on both mobile and web. I am using Angular 6.
Every time you click on a button or link on the browser on my desktop it works on first click, but on mobile the click doesn't work sometimes. correct me if I'm wrong, but I believe people refer this as the ghost click.
I thought that this was the 300ms delay, but I have tried using hammerjs's tap and tried fastclick instead and it seems like its not the issue.
I have tried using touchstart in html instead of click/tap and it seems to get rid of the issue.
Is there a way to bind mousedown and touchstart to each other?
is there a way to use just click/mousedown on desktop and touchstart on mobile?
What other ways can I go about fixing this?

Try in your template:
<div
(touchmove)="touchMoving($event)"
(touchstart)="touchStart($event)"
(touchend)="touchEnd($event)"
>
In your component you can now use the $event data:
touchMoving($event) {
console.log($event);
}

If you are using Angular 6, Be default it internally uses hammerjs library to handle touch gesture events. Also it removes 300ms delay for double tap. Here is the URL that explains more on Touch Gesture in Angular. https://blog.angularindepth.com/gestures-in-an-angular-application-dde71804c0d0

I have found that you should ALWAYS use (mousedown) instead of (click) for buttons in Angular if its a mobile app. With click the event sometimes will not register due to DOM issues. For best performance just use mousedown.

Related

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

Responsive website: why would touchstart be needed instead of click?

I'm developping a complex Single-Page-Application using ReactJS.
This page was initially a desktop browser application with lots of "onclick" listeners everywhere, including internal code, but also external plugins/libs that we can't modify easily.
But now we made it responsive, and it is available in both a mobile website and a Cordova/Phonegap app.
Just making the CSS responsive produces a nice result, without introducing touchstart event at all.
When the user touch an element with a click listener, the listener is called and the click event bubbles correctly (except on iOS but it can be solved)
So, unless I'm trying to implement touch specific complex features like drag&drop with touch, or special "synthetic events" like press, pinch, tap, swipe, (often provided by mobile-specific libraries), why would I need to use touchstart in any way?
For example I often see people trying to mix both click and touchstart in applications according to the device capabilities.
But if click works, why would I need to care about touchstart?
What are the advantages of touchstart that are not handled by click already?
Note: this is NOT at all about the 300ms click delay which can be solved in other ways.
The only reason we use touchstart/touchmove are for drag events, such as scrolling/inner-scolling detection.
For example, we want to detect the end of a scroll for infinite scroll.
On desktop we can use:
$('.whatever').scroll({ blahhhh
but on mobile we use:
$('.whatever').on('touchmove', blahhhh
Also you should definitely checkout How to bind 'touchstart' and 'click' events but not respond to both?

Does it make performance diffence if I use `touch` event instead of `click' event in JQM

I came to this question while I was reading an article to improve the performance of mobile apps.
ARTICLE
To cut short your precious time . I am pointing out the related point number there it 14.
This point says that we should change all the click event to touch event because click event takes half a second to fire in mobile device.
I am still rookie to Jquery/JQm . so I have a confusion .
that is click event is already supported in Jquery Mobile does that means this click event works differently than the normal JS/Jquery click event??(internally ) .
Or should I change all the click event from my JQM app to touch ?? .That will give me better performance .
I know I might be silly to ask this but I am really confused about this .
Would be really thankful if some one can suggest me
Thanks
the click event and the touch event are two different things. For most mobile devices, the click event fires after 300ms. The touch event fires as soon as a finger touches the screen.
For different ways of getting rid of that 300ms delay with the click event, see this article:
http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
To make things easier for you though, jQuery Mobile includes a vclick event, which responds to both click and touch events. If you want your events to work on both desktop and mobile, use that. More info on vclick here:
http://api.jquerymobile.com/vclick/
It will be good to use touch if your potential users are mostly touch phone users. Also, it surely affects processing time, because a Mobile Operating system for touch phones have touch attributes and functions everywhere (just they are altered for click events). So, I would prefer touch.

A tag getting click instead of touchstart [duplicate]

I have a bootstrap .btn that I want to toggle with the mouse click. The problem is that the response is way too slow on tablets, since the click arrives 300 ms after the touchstart in mobile browsers.
I tried binding the logic in the touchstart event, effectively breaking the app for desktop browsers where there is no touchstart. I then thought of binding the same logic also to click but then I get a repeated event in mobile browsers. I've juggling around, trying to unbind from click the first time I receive a touchstart, and so on, and managed to come up with a design so complicated that there is always some quirk here or there that I cannot solve.
For instance, I can't get a text input to receive focus in the tablet: if I do focus on touchstart then the click event returns the focus to the button. I tried jQuery Mobile's vmousedown, but I couldn't manage to have multi-touch (tapping more than one button at the same time only changed one of them). I don't want to reinvent a lot of wheels, and I'm sure I must be missing something obvious, either on jQuery Mobile, or plain JavaScript.
In concrete, I want an event like vmousedown that works both on desktops and mobiles, only fires once on each, and allows multi-touch.
Utilize Modernizr for handling actions based on the device, etc. It provides great cross-browser/platform support without the need to sniff User Agents and the like. Instead, it uses feature detection.
You can just use the Modernizr functions with jQuery's $(document).ready(function()});
$(function(){
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
});
This code has been taken straight from the Modernizr Documentation
Also, here's another resource for performing touch tests
Late to the party, but note that jQueryMobile also has similar touch detection:
if ( $.mobile.support.touch ) {...
And no, IMHO, you are not missing anything obvious :), cross-platform / cross-device / touch-friendly features are still harder than they should be. For example, today I'm looking at a win8 surface tablet: touch-screen and a mouse. There are cases where i'd like to know which device was used. event.originalEvent.type should differentiate between tap and click, right? wrong :(.

Unified and transparent pointer events in jQuery

I have a bootstrap .btn that I want to toggle with the mouse click. The problem is that the response is way too slow on tablets, since the click arrives 300 ms after the touchstart in mobile browsers.
I tried binding the logic in the touchstart event, effectively breaking the app for desktop browsers where there is no touchstart. I then thought of binding the same logic also to click but then I get a repeated event in mobile browsers. I've juggling around, trying to unbind from click the first time I receive a touchstart, and so on, and managed to come up with a design so complicated that there is always some quirk here or there that I cannot solve.
For instance, I can't get a text input to receive focus in the tablet: if I do focus on touchstart then the click event returns the focus to the button. I tried jQuery Mobile's vmousedown, but I couldn't manage to have multi-touch (tapping more than one button at the same time only changed one of them). I don't want to reinvent a lot of wheels, and I'm sure I must be missing something obvious, either on jQuery Mobile, or plain JavaScript.
In concrete, I want an event like vmousedown that works both on desktops and mobiles, only fires once on each, and allows multi-touch.
Utilize Modernizr for handling actions based on the device, etc. It provides great cross-browser/platform support without the need to sniff User Agents and the like. Instead, it uses feature detection.
You can just use the Modernizr functions with jQuery's $(document).ready(function()});
$(function(){
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
});
This code has been taken straight from the Modernizr Documentation
Also, here's another resource for performing touch tests
Late to the party, but note that jQueryMobile also has similar touch detection:
if ( $.mobile.support.touch ) {...
And no, IMHO, you are not missing anything obvious :), cross-platform / cross-device / touch-friendly features are still harder than they should be. For example, today I'm looking at a win8 surface tablet: touch-screen and a mouse. There are cases where i'd like to know which device was used. event.originalEvent.type should differentiate between tap and click, right? wrong :(.

Categories

Resources