Question

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

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

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

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

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

关于我可以采取哪些措施来解决这个问题？

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();

请注意，这也会停止滚动和缩放。如果您仍想要缩放，则可能需要重新实现或使用其他库。

关于触摸事件的良好参考信息