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?
Related
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.
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.
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 :(.
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 :(.
I'm building an app in phonegap. The app makes heavy use of javascript and has a content area that should be scrollable. However I also need to use the touchStart and touchEnd events.
The problem is that, unless you use e.preventDefault on touchMove/touchStart, you will get the touchStart event only once and never again after that (Not useful).
If you do e.preventDefault() on either of those two, native scrolling is disabled (on mobile devices).
How do I allow native scrolling while also listening to touchstart + touchend?
Failing that, could I simulate native scrolling (using touchmove?)? I've tried my hand at this myself, and the result of that was frankly terrible.