手势在文本区域或输入中开始时的触摸动作行为

Posted 2023-02-24

【中文标题】手势在文本区域或输入中开始时的触摸动作行为

【英文标题】：touch-action behavior when gesture begins in textarea or input

【发布时间】：2020-10-17 22:19:25

【问题描述】：

似乎当手势以textarea 或input 开始时，touch-action 会被忽略。这对我来说是出乎意料的。预期行为：touch-action 被考虑在内，例如不会发生滚动（参见下面的演示）。

Demo：https://jsfiddle.net/1x8pc5ed/1/（打开桌面浏览器开发者工具并激活触摸模拟或者直接在手机上打开，然后尝试从textarea、input等区域滚动页面开始手势比较。）

我已经在 Firefox 和 Chrome 中测试过：

Chrome 仅在 textarea 情况下忽略 touch-action。 Firefox 在input 和textarea 情况下会忽略touch-action。

谁能解释这种行为？对我来说它看起来像一个错误。

【参考方案1】：

关于textarea案例：

这可能不是错误，而是预期的行为。

根据https://w3c.github.io/pointerevents/#determining-supported-touch-behavior：

如果触摸行为符合命中测试元素与其最近的具有默认触摸行为的祖先之间的每个元素的 touch-action 属性（包括命中测试元素和具有默认触摸行为的元素），则支持触摸行为.

即在这种情况下，链在textarea 开始和结束，因为textarea 可能具有默认触摸行为（可能是可滚动的）。

在textarea 上应用overflow: hidden 或touch-action: none 以防止滚动。