touch-action

touch-action

API

touch-action 属性用于控制元素的默认触摸行为。

1
touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation
  • auto

    默认值,由浏览器决定元素的触控事件对应的动作

  • none

    元素发生触控事件时没有任何动作

  • pan-x

    只允许单指水平平移手势,可以与 pan-ypan-uppan-downpinch-zoom 组合使用

  • pan-y

    只允许单指垂直平移手势,可以与 pan-xpan-leftpan-rightpinch-zoom 组合使用

  • pan-left

    只允许单指向左方向的水平平移手势,可以与 pan-rightpan-uppan-downpinch-zoom 组合使用

  • pan-right

    只允许单指向右方向的水平平移手势,可以与 pan-leftpan-uppan-downpinch-zoom 组合使用

  • pan-up

    只允许单指向上方向的垂直平移手势,可以与 pan-leftpan-rightpan-downpinch-zoom 组合使用

  • pan-down

    只允许单指向下方向的垂直平移手势,可以与 pan-leftpan-rightpan-uppinch-zoom 组合使用

  • manipulation

    只允许进行平移手势以及持续缩放手势,auto 支持的其他默认操作均不支持,如:双击缩放等。效果等同于 pan-x pan-y pinch-zoom

  • pinch-zoom

    支持多指平移和缩放手势

兼容性

Demo

  • 禁用元素上的任何手势

    1
    touch-action: none;
  • 解决移动端 click 事件 300ms 延迟问题

    为了避免 click 事件与双击事件冲突,click 事件增加了 300ms 的延迟;设置 touch-action: manipulation 后,禁止双击事件,可以避免这个问题

    1
    2
    3
    html {
    touch-action: manipulation;
    }
  • Demo

参考