handle both mouse and touch events on touch screens

javascript google-chrome firefox touch touchscreen
johnny picture johnny · Jan 25, 2013 · Viewed 42.7k times · Source

I'm writing web application which should support both mouse and touch interactions. For testing I use touch screen device with Windows 7. I've tried to sniff touch events in latest Firefox and Chrome canary and got the following results:

On touch Firefox fires touch and corresponding mouse event. Chrome fires touchstart/mousedown, touchend/mouseup pairs, but mousemove fired in very strange manner: one/two times while touchmove.

All mouse events handled as always.

Is there any way to handle mouse and touch evens simultaneously on modern touch screens? If Firefox fires a pair of touch and mouse event what happens on touchmove with mousemove in Chrome? Should I translate all mouse events to touch or vice versa? I hope to find right way to create responsive interface.

Answer

Rick Byers picture Rick Byers · Apr 25, 2013

You can't really predict in advance which events to listen for (eg. for all you know a USB touch screen could get plugged in after your page has loaded).

Instead, you should always listen to both the touch events and mouse events, but call preventDefault() on the touch events you handle to prevent (now redundant) mouse events from being fired for them. See http://www.html5rocks.com/en/mobile/touchandmouse/ for details.

Related questions

Detecting the onload event of a window opened with window.open

window.popup = window.open($(this).attr('href'), 'Ad', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); $(window.popup).onload = function() { alert("Popup has loaded a page"); }; This doesn't work in any browser I've tried it with (IE, Firefox, Chrome). How can …

Read More
new Date() is working in Chrome but not Firefox

I am creating a datetime string that looks like this: 2010-07-15 11:54:21 And with the following code I get invalid date in Firefox but works just fine in Chrome var todayDateTime = year + '-' + month + '-' + day + ' ' + hour + ':…

Read More
Is it possible to display a custom message in the beforeunload popup?

When using window.onbeforeunload (or $(window).on("beforeonload")), is it possible to display a custom message in that popup? Maybe a small trick that works on major browsers? By looking at existing answers I have the feeling this was possible …

Read More