Javascript触摸事件故障

Question

我目前正在使用Javascript创建一些滑块，用于触摸，我得到的结果并非我所希望的。

当按住其中一个滑块手柄时，它会获得半透明的深灰色覆盖（就像在iOS上按住它们时所做的所有链接一样）。 完成此操作后，无法拖动手柄。

正如您所想象的那样，这使得它们非常难以使用。

我遇到的另一个问题是页面滚动。 除非我得到近乎完美的横向滑动，否则iOS Safari会认为我正在尝试滚动页面并停止js。

我知道有可能解决这些问题，因为jQuery mobile没有滑块。 我已经浏览了jQuery移动滑块的源代码，但我找不到它们如何防止这些问题。

关于我能做些什么来解决这个问题的任何想法？

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

Answer 1

问题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