问题描述
似乎手势从textarea
或input
开始时,touch-action
被忽略了。这对我来说是意外的。预期的行为:touch-action
已考虑在内,例如滚动不会发生(请参见下面的演示)。
演示:https://jsfiddle.net/1x8pc5ed/1/(打开桌面浏览器开发人员工具并激活触摸模拟,或者只是在手机上将其打开,然后尝试从textarea
,{{1 }}和其他领域进行比较。)
我已经在Firefox和Chrome中对其进行了测试:
- Chrome仅在
input
情况下忽略touch-action
。 - 在
textarea
和touch-action
情况下,Firefox忽略input
。
任何人都可以解释这种行为吗?对我来说,这似乎是个错误。
解决方法
关于textarea
案:
这可能不是错误,而是预期的行为。
根据https://w3c.github.io/pointerevents/#determining-supported-touch-behavior:
如果触摸行为符合经命中测试的元素及其最近祖先之间具有默认触摸行为的每个元素的触摸动作属性(包括经命中测试的元素和具有默认触摸行为的元素),则支持触摸行为
即在这种情况下,链条会在textarea
上开始和结束,因为textarea
可能具有默认的触摸行为(可能可以滚动)。
在overflow: hidden
上应用touch-action: none
或textarea
可以防止滚动。