javascript - 说明您可能使用触摸 Action 的情况 : manipulation

见过

touch-action: manipulation;

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

我阅读了 Mozilla Developer Network 上的值

The touch-action CSS property specifies whether, and in what ways, a given region can be manipulated by the user (for instance, by panning or zooming).

auto: The user agent may determine any permitted touch behaviors, such as panning and zooming manipulations of the viewport, for touches that begin on the element.

none: Use this value to disable all of the default behaviors and allow your content to handle all touch input (touches that begin on the element must not trigger default touch behaviors).

pan-x: The user agent may consider touches that begin on the element only for the purposes of horizontally scrolling the element's nearest ancestor with horizontally scrollable content.

pan-y: The user agent may consider touches that begin on the element only for the purposes of vertically scrolling the element's nearest ancestor with vertically scrollable content.

manipulation: The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

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

---

Best Answer-推荐答案

根据站点 post , touch-action: handling 有助于防止 PointerEvents通过消除每个事件检测延迟来触发。例如，双击屏幕时可能会触发双击事件，直到 300 毫秒的情况下 touch-action: handling 未被声明。

短引号:

Most touch-based mobile browsers wait 300ms between your tap on the screen and the browser firing the appropriate handler for that event. It was implemented because you could be double-tapping to zoom the page to full width. Therefore, the browser waits for a third of a second — if you don’t tap again, the “click” is activated.

...

Microsoft has solved many touch-based issues in the PointerEvents specification. For example, the pointerup event won’t be fired if the user is scrolling the page.

There is also a non-standard CSS touch-action property which allows you to remove the delay on specific elements or the whole document without disabling pinch-zooming:

a, button, .myelements { ... }

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

关于javascript - 说明您可能使用触摸 Action 的情况 : manipulation，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38958354/