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

时间:2016-08-15 15:45:59

标签: javascript jquery html ios css

我见过

touch-action: manipulation;

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

我读了Mozilla Developer Network

上的值
  

touch-action CSS属性指定是否以及以何种方式执行操作   给定区域可以由用户操纵(例如,通过平移   或缩放)。

     

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

     

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

     

泛X:   用户代理可以考虑开始的触摸   该元素仅用于水平滚动的目的   元素最近的祖先,具有可水平滚动的内容。

     

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

     

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

但我不明白将此应用于大多数链接/按钮的想法是什么。这是否可以防止使用默认值auto?

时通常会出现的常见问题

2 个答案:

答案 0 :(得分:4)

根据sitepoint posttouch-action: manipulation通过删除每个事件检测延迟来帮助阻止PointerEvents点火。例如,双屏事件可能会在双击屏幕时触发,直到300ms案例touch-action: manipulation未被声明为止。

简短的引用:

  

大多数基于触摸的移动浏览器在您点击屏幕和浏览器之间等待300毫秒,为该事件触发相应的处理程序。它的实现是因为您可以双击以将页面缩放到全宽。因此,浏览器会等待三分之一秒 - 如果您不再点击,则会激活“点击”。

     

...

     

微软已经解决了PointerEvents中许多基于触摸的问题   规格。例如,如果是,则不会触发指针事件   用户正在滚动页面。

     

还有一个允许的非标准CSS触摸操作属性   您要删除特定元素或整个文档的延迟   不禁用缩放缩放:

     

a,按钮,.myelements {...}

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

答案 1 :(得分:0)

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