Your SlideShare is downloading. ×
JavaScript Touch event or Mouse event – detect and handle according to device
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,107

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 …

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,107
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.

×