Javascript触摸事件故障

Javascript touch events glitchy

本文关键字：故障 事件 触摸 Javascript      更新时间：2023-09-26

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

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

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

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

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

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

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

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

相关文章：