javascript - 说明可能使用触摸操作的情况 : manipulation

Question

我见过

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 通常会出现的常见问题？

Answer 1

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

简短的引用:

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 PointerEventsspecification. For example, the pointerup event won’t be fired if theuser is scrolling the page.

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

a, button, .myelements { ... }

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