Javascript touch events glitchy

Question

I'm currently creating some sliders in Javascript, for use with touch, and the results I'm getting aren't all that I'd hoped for.

When holding down one of the slider handles, it gets a translucent dark grey overlay (like all links do when you hold them down on iOS). Once it's done this, the handle can't be dragged.

This makes them exceptionally difficult to use, as you can imagine.

Another problem I'm having is with the page scrolling. Unless I get a near-perfect horizontal swipe, iOS safari thinks I'm trying to scroll the page and stops the js.

I know its possible to fix these problems, because jQuery mobile doesn't have them with their slider. I've been through the source code for the jQuery mobile slider, but I can't find how they're preventing these problems.

Any ideas on what I can do to fix this?

jQuery mobile's slider - http://jquerymobile.com/demos/1.1.0/docs/forms/slider/

Answer 1

Problem 1 - Grey Box on click:

Add this css for all elements:

-webkit-tap-highlight-color: rgba(0,0,0,0);

You might also want to use these as well to stop highlighting:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Problem 2 - Stop Scrolling

You'll need a handler for the events touchstart and touchend and you'll need to add this to the handlers.

event.preventDefault();

Do note this will stop scrolling and zooming as well. If you still want zooming you will likely need to re-implement or use an additional library.

Good reference info on touch events

Tutorial: http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Apple Docs (this has a good explanation on the relation between touch and mouse events): https://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html