Javascript 触摸事件故障

Question

我目前正在用 Javascript 创建一些 slider ，用于触摸，但我得到的结果并不是我所希望的。

当按住其中一个 slider handle 时，它会出现一个半透明的深灰色覆盖层(就像在 iOS 上按住它们时所有链接所做的那样)。完成此操作后， handle 将无法拖动。

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

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

我知道可以解决这些问题，因为 jQuery Mobile 的 slider 没有这些问题。我已经查看了 jQuery 移动 slider 的源代码，但我找不到它们是如何防止这些问题的。

关于我可以做些什么来解决这个问题有什么想法吗？

jQuery Mobile 的 slider - 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