jquery click event for tablets and touch screen phones

Question

Ok, I am fairly new to web development for mobile/tablet platforms. I am pretty confident though in developing for a browser environment.

My problem is that I don't own any tablet (I am poor so have to fly blind) so it's hard for me to do testing. I'm also quite anxious about the click events not working properly.

How can I ensure that click and mousedown jquery events work on tablets/smartphones correctly?

Is there any consensus on best practice for click events and tablets/smartphones?

Note: I am not developing a mobile only site - the site transforms shape for mobile.

Ephor

Your could use this: $(element).on('touchstart click', function(){...});. – Bost

Emulators of help? webdesignerdepot.com/2012/11/… – Erinnerinna

@Bost i have same problem onclick not working on tablet , if use .on and print something then it works.alert i tried replcing with cosole.log but that onclick not working with that – Velez

I needed to upgrade to jQuery 1.7 to get Joe's code to work. After that it worked on my phone even without touchstart. – Flemming

Answer 1

Mobile browsers will still respond to click events, though they will introduce a delay (usually around 300 ms). If you want a more responsive experience, you can try to detect if you are on a mobile platform and use either touchstart or touchend events. I find touchend is usually a better experience, mainly because the user's hand is still in the way when touchstart fires.

Something like this:

$(element).on(isMobile ? 'touchend' : 'click', function(e) {...});

Or you can use hammer.js, which will work for both desktop and mobile.

As for testing, you can read through the answers to this Stackoverflow question: Simulating touch events on a PC browser.

Earleneearley