JavaScript Touch event or Mouse event – detect and handleaccording to deviceBlog post link: http://jbkflex.wordpress.com/2...
Upcoming SlideShare
Loading in …5
×

JavaScript Touch event or Mouse event – detect and handle according to device

1,395 views
1,262 views

Published on

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 desktops.
For the full post download this file or visit the actual blog post link: http://jbkflex.wordpress.com/2012/07/12/javascript-touch-event-or-mouse-event-detect-and-handle-according-to-device/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,395
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript Touch event or Mouse event – detect and handle according to device

  1. 1. JavaScript Touch event or Mouse event – detect and handleaccording to deviceBlog post link: http://jbkflex.wordpress.com/2012/07/12/javascript-touch-event-or-mouse-event-detect-and-handle-according-to-device/You might have faced this issue before or even might have wondered – How to write a single piece of codethat establishes correct event in the device i.e touch events for mobile web browsers and mouse eventsfor desktop browsers. You need not hard code the events for your app code. Once you detect and handlethose events, you can run your app everywhere – mobiles and desktops. Normally when we develop an app formobile browsers we test it in a desktop browser, so if you have touch events hard-coded into your script then it isa pain to change the script and make it work for desktops (replacing touch events with mouse events) and thenchange it back again to touch for mobiles. So, here is a small script/trick to universally handle the event and neednot worry about devices, var isTouchSupported = ontouchstart in window.document; 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 touch is supported in the document object. If you debug andcheck out the document object in your desktop browser you will see a list of all the events for e.g onclick,onmousedown etc. Since it is a desktop browser so ontouchstart is not a property of the document object. Had itbeen a mobile browser then it would have been a part of the document object. This is all we need to detect. Thenext three lines establish a common platform for the touch vs mouse events.Now, all you need is to register the event to your item such as a button. Here is an example, document.getElementById("myButton").addEventListener(startEvent,function() {},false);The startEvent variable acts as a placeholder. It will be replaced by mousedown for desktop browsersandtouchstart for mobile browsers. Similarly the other two events can be used. This way a single app can runeverywhere.

×