Geek asks and answers

Javascript touch glitchy events

I am currently creating several sliders in Javascript for use with a touch screen, and the results I get are not all that I was hoping for.

When you hold one of the slider handles, it gets a translucent dark gray overlay (like all links when you hold them on iOS). Once this is done, the handle cannot be dragged.

This makes them extremely difficult to use, as you might imagine.

Another issue that I am having is scrolling the page. If I don't get an almost perfect horizontal swipe, iOS Safari thinks I'm trying to scroll the page and stop js.

I know that these problems can be fixed because jQuery mobile does not have them with its slider. I went through the source code for the jQuery mobile slider, but I can not find how they prevent these problems.

Any ideas on what I can do to fix this?

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

+3
source share
1 answer

Problem 1 - Gray box when pressed:

Add this css for all elements:

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

You can also use them to stop the selection:

-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 will need a touchstart and touchhend event handler, and you will need to add this to the handlers.

event.preventDefault();

, . , , , .

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

Apple Docs ( ): https://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

+2

More articles:


All Articles