Geeks With Blogs
Phubar Baz Musings of an HTML5 Programmer

JavaScript works just fine for getting user input from a mouse. You have all kinds of mouse related events: click, mousedown, mouseup, mousemove. But if your application only supports devices that use a mouse you're missing a lot of users. The great thing about JavaScript and HTML5 is that your app can work anywhere from desktop to tablet to phone. Only one out of three of those normally has a mouse.

So how do we remedy the situation? It's easier than you might think. JavaScript has the capability to capture touch events. Here are the touch events and their corresponding mouse events.

  • touchstart == mousedown
  • touchend == mouseup
  • touchmove == mousemove

Notice that there is no click event specific for touch. The click event still works for items like buttons and links. Not so much for capturing clicks of elements. You should use clickable items whenever possible, for example put a link around an element you want to get click events for.

If you must get touch events you'll have to do a little more processing. Touch events can have multiple touch points so you can't just use the same event handler as your mouse events. You're probably going to want to use either mouse or touch events but not both. I've found that mouse events do occasionally fire on touch devices so you don't want the same event twice.

Therefore we need a way to check if touch is available. You can do that by checking for one of the touch event handlers in the document element.

function isTouchDevice()
{
    return ("ontouchstart" in document.documentElement);
}

That was pretty easy. Now we need to add event handlers to some element.

if (isTouchDevice())
{
    canvas.addEventListener("touchstart", function(e) { onTouchstart(e); });
    canvas.addEventListener("touchmove", function(e) { onTouchmove(e); });
}
else // Use mouse events

Now let's write the touch event handlers. The touch event has a touches array containing a list of pageX and pageY coordinates, just like mouse events.

function onTouchmove(e)
{
    e.stopPropagation();
    e.preventDefault();
    doSomething(e.touches[0].pageX, e.touches[0].pageY);
}

Usually you only care about getting one set of coordinates so it's fine to use the first item in the touches array. Notice that we also call stopPropagation() and preventDefault() on the event object. This will stop the browser from doing its default behavior, which on a touch device either scrolls or resizes the page.

Your mouse event handler should look almost exactly the same so you have the same behavior no matter what input device.

function onMousemove(e)
{
    doSomething(e.pageX, e.pageY);
}

Now you have the same functionality on both mouse and touch devices. Take a look at this example app that I wrote called Fading Tails. It works on both touch and mouse devices. http://www.worldtreesoftware.com/lab/fadingTails/fadingTails.html

Posted on Monday, February 10, 2014 3:16 PM HTML5 , JavaScript , touch | Back to top


Comments on this post: Getting Input from Touch Screens in JavaScript

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © PhubarBaz | Powered by: GeeksWithBlogs.net