3

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/

4

1 に答える 1

2

問題 1 - クリックすると灰色のボックスが表示される:

すべての要素に次の css を追加します。

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

これらを使用して、強調表示を停止することもできます。

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

問題 2 - スクロールを停止する

イベント touchstart および touchend のハンドラーが必要であり、これをハンドラーに追加する必要があります。

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

于 2012-05-21T23:22:42.287 に答える