你有使用过touch-action属性吗？说说它的用途

touch-action 属性是 CSS 的一个属性，用于控制浏览器在用户与触摸屏交互时如何处理触摸事件，例如滚动、缩放和平移。它允许开发者禁用或启用默认的浏览器触摸行为，从而实现更精细的触摸控制和更好的用户体验，尤其是在 Web 应用程序和游戏中。

touch-action 的主要用途包括：

禁用默认浏览器行为: 这对于创建自定义的触摸手势或控件至关重要。例如，如果你正在构建一个可拖动的元素，你可能希望禁用默认的滚动行为，以便用户可以自由地拖动元素而不会触发页面滚动。
优化滚动性能: 通过指定滚动方向，浏览器可以优化滚动性能，减少滚动时的延迟和卡顿。
实现平滑的缩放和旋转: touch-action 可以帮助开发者实现更平滑的缩放和旋转操作，避免浏览器默认的缩放行为带来的干扰。
创建自定义手势: 结合 JavaScript 的触摸事件 API，touch-action 可以帮助开发者创建各种自定义手势，例如双指缩放、旋转和滑动。

以下是 touch-action 的一些常用值及其作用：

auto (默认值): 浏览器根据自身策略处理触摸事件。通常情况下，这意味着浏览器会处理滚动和缩放等默认行为。
none: 禁用所有浏览器默认的触摸行为。这意味着开发者需要使用 JavaScript 完全控制触摸交互。
pan-x: 允许水平平移 (例如，水平滚动)。
pan-y: 允许垂直平移 (例如，垂直滚动)。
pan-x pan-y: 允许水平和垂直平移。
manipulation: 允许平移和缩放，但禁用其他操作，例如双击缩放。这通常用于需要平滑平移和缩放的场景，例如地图或图像查看器。
pinch-zoom: 允许缩放。
double-tap-zoom: 允许双击缩放。

示例:

<div class="draggable" style="touch-action: none;">
  拖动我
</div>

<script>
  const draggable = document.querySelector('.draggable');
  let startX, startY;

  draggable.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
  });

  draggable.addEventListener('touchmove', (e) => {
    const deltaX = e.touches[0].clientX - startX;
    const deltaY = e.touches[0].clientY - startY;

    draggable.style.transform = `translate(${deltaX}px, ${deltaY}px)`;

    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
  });
</script>