You might have faced this issue before or even might have wondered – How to write a single piece of code that establishes correct event in the device i.e touch events for mobile web browsers and mouse events for desktop browsers. You need not hard code the events for your app code. Once you detect and handle those events, you can run your app everywhere – mobiles and computer browsers. Normally when we develop an app for mobile browsers we test it in a desktop browser, so if you have touch events hard-coded into your script then it is a pain to change the script and make it work for computer browsers(replacing touch events with mouse events) and then change it back again to touch for mobiles. So, here is a small script/trick to universally handle the event and need not worry about devices,
var isTouchSupported = 'ontouchstart' in window; var startEvent = isTouchSupported ? 'touchstart' : 'mousedown'; var moveEvent = isTouchSupported ? 'touchmove' : 'mousemove'; var endEvent = isTouchSupported ? 'touchend' : 'mouseup';
If you see the first line of the script, it detects if ontouchstart property is available in the global window object. It it is available or it is a part of the window object, then it returns true else it returns false. Note that ontouchstart is a standard javascript touch event attribute. Now, if you are making this check in a computer browser (for e.g FF, Chrome or IE) then ontouchstart is not a property of the window object. So isTouchSupported will be set to false. Had it been a mobile browser (e.g iOS, Android) then ontouchstart would have been automatically a part of the window object and correspondingly isTouchSupported variable will set to true. This is all we need to detect. The next three lines establish a common platform for the touch vs mouse events i.e I am mapping the touch events to its corresponding mouse events.
Now, all you need is to register the event listener to your element so that some action is performed when the event is triggered on the element. Here is an example, (where myButton is the ID of my imaginary button)
document.getElementById("myButton").addEventListener(startEvent,function(){},false);
The startEvent variable acts as a placeholder. It will be replaced by mousedown for computer browsers and touchstart for mobile browsers. Similarly the other two events can be used. This way a single app can run everywhere.
Here is a good example with the usage (make sure you look at the javascript script code) – http://jbkflex.wordpress.com/2012/07/21/replicating-the-iphone-swipe-gesture-common-code-for-mobiles-and-desktop-browsers/
Here is another one – http://jbkflex.wordpress.com/2012/07/25/360-degree-car-rotation-common-code-for-mobiles-and-computer-browsers/
Please do suggest me if there are any better methods of mapping touch v/s mouse events.
[…] devices. So this is a common code and you do not have to hardcode anything. I have a separate post for this, you can go through […]
poor idea to use either touch OR mousedown events, as there are increasingly more devices with both mouse and touch support.
Check out hammer.js, it handles it seamlessly as a standalone or jquery plugin.
This approach is problematic in devices which have both a mouse and a touchscreen (a setup increasing common on laptops and notebooks), What happens then, is that the touchscreen driver correctly fires a touchstart event and immediately after would simulate a mousedown event and a click event if you release the finger quickly.
Thanks for pointing this out. I will need to look at this.
Sure. I am also looking for a solution to that. This guy at SO: http://stackoverflow.com/a/8228613/1049693 seems to have an interesting idea, but he doesn’t provide any code and I’m not sure how to implement what he’s suggesting. Meanwhile, I am trying out hammer.js which wraps both touch and mouse events under it’s own event layer (i.e. tap, drag, swipe etc.) and handles the touch vs mouse game for you
Will go through the link and hammer.js. Thanks again for sharing your thoughts. Appreciate that!!
Sure. I’ll be happy to hear from your experience too.
Sure. I will give it a shot.
I disagree. This setup is fine. Given this code runs once, the startEvent would be set to either touchstart or mousedown, not both.
[…] JavaScript Touch event or Mouse event – detect and handle according to device | RIA Lab […]
[…] http://jbkflex.wordpress.com/2012/07/12/javascript-touch-event-or-mouse-event-detect-and-handle-acco… […]
[…] Snippet Source/Credit: jbkflex.wordpress.com […]
Hi…I think this will work for me but I’m not sure where to add the code. I want to add a telephone number hyperlink where if it’s a touch event from a smartphone it automatically brings up the dialog box of options. tel:123 4567 seems to work but when I click the link with a mouse it brings an error. I’m assuming some extra coding after detecting mouse click will handle this error but I’m not sure how to do this. Any help would be appreciated.
Add the code when your application initialises for eg. window.load, dom ready – $.ready() or in your init() methods..
Thanks for the quick reply. Judging by your explanation, I think I’ll need someone to explain the explain, lol.
i will send you an example.. 🙂
cool, thanks. I hope you remember that this is for a web page.
Ed,
I have emailed you the sample code.
Joseph
[…] Snippet Source/Credit: jbkflex.wordpress.com […]