javascript - Javascript 触摸事件故障

Question

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

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

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

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

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

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

score 2 · Accepted Answer

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

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

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

1 回答 1