Develop Reference

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?

createTouch vs ontouchstart - best way to detect touchscreen devices?

Currently, for detecting touchscreen devices I use this in my javascript:
if ('createTouch' in document) {
// do touchscreen-specific stuff
}
I see that many developers use ontouchstart, like this:
if ('ontouchstart' in document) {
// do touchscreen-specific stuff
}
What is the difference between createTouch and ontouchstart? Which one is the safest to use? Are there some other simple, reliable alternatives to these two?

touchstart event is fired when a touch point is placed on the touch surface([MDN][1])
createTouch method creates and returns a new Touch object.([MDN][2])
The better way from my point of view is detecting existance of event in window than only create it.
Also your statement check only for existing of touch events in window object, not touch screens, like windows phones, so probably you would like to check pointer-events too.
P.S.: Look at Modernizr library which have "touch" detection and much more.

ontouchstart is event based trigger. It will be invoked when user does some action. More info at ontouchstart event. Hence, it is more efficient for performing user based action.
While createtouch will be invoked, not matter if user did some action or not. Somebody please correct me, if I'm wrong. :)

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.

Javascript event fired on long press/tap on tablets

I am developing a website using RWD principles and it is supposed to self adjust and work in both desktop and in tablets, and eventually in Mobiles as well.
I know in Android development we can catch a long tap event and do some actions.
But my question is that, is it possible to do it in HTML/HTML5 and Javascript?
Basically looking for a predefined event which gets fired on long press on html elements.
I have gone through This and understood all the alternatives suggested. Looking if anything new has been introduced in HTML5.

Might check out pointer.js from Mozilla. Apparently somewhat standardizes the touch/ mouse events into a single event type. Probably better than using timeouts, I'd imagine.

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 :(.