解释可能使用触摸动作的情况：操作

Question

见过

touch-action: manipulation;

在各种网站的CSS中应用于按钮和链接。我很好奇这样做的目的是什么？

我阅读了Mozilla Developer Network上的值

touch-action CSS 属性指定是否以及以何种方式， 给定区域可以由用户操作（例如，通过平移 或缩放）。

自动： 用户代理可以确定任何允许的触摸行为，例如 作为视口的平移和缩放操作，用于触摸 从元素开始。

none：使用此值禁用所有 默认行为并允许您的内容处理所有触摸输入 （从元素开始的触摸不得触发默认触摸 行为）。

pan-x： 用户代理可能会考虑开始于 该元素仅用于水平滚动 具有水平滚动内容的元素最近的祖先。

泛型： 用户代理可能会考虑仅在元素上开始的触摸 垂直滚动元素最近祖先的目的 具有可垂直滚动的内容。

操纵：用户代理可以 仅出于以下目的考虑在元素上开始的触摸 滚动和连续缩放。支持的任何其他行为 by auto 超出了本规范的范围。

但我不明白将其应用于大多数链接/按钮背后的想法。这是否可以防止使用默认值 auto 通常会出现的常见问题？

Answer 1

根据站点点post，touch-action: manipulation 通过消除每个事件检测延迟来帮助防止PointerEvents 火灾。例如，双击屏幕时可能会触发双击事件，直到 300 毫秒 case touch-action: manipulation 未被声明。

短引号：

大多数基于触摸的移动浏览器在您点击屏幕和浏览器为该事件触发适当的处理程序之间等待 300 毫秒。之所以实现它，是因为您可以双击以将页面缩放到全宽。因此，浏览器会等待 1/3 秒——如果您不再点击，“点击”就会被激活。

...

Microsoft 已在 PointerEvents 中解决了许多基于触摸的问题 规格。例如，pointerup 事件不会被触发，如果 用户正在滚动页面。

还有一个非标准的 CSS touch-action 属性允许 您可以消除特定元素或整个文档的延迟 不禁用捏缩放：

一个，按钮，.myelements { ... }

我不确定情况，这取决于您是否对屏幕点击不满意，因此比较是个好主意。

Answer 2

我将touch-action: manipulation分配给一个按钮，以避免在手机上双击时页面放大。