CSS中的双击缩放延迟：`touch-action: manipulation`的底层优化 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS `touch-action: manipulation` 的底层优化：双击缩放延迟的秘密

大家好，今天我们来深入探讨一个看似简单，实则蕴含着大量优化的 CSS 属性：touch-action: manipulation。很多人可能只是简单地将其理解为“禁用双击缩放”，但它背后的故事远不止于此。理解 touch-action 的底层机制，特别是它如何影响双击缩放行为，能够帮助我们构建更流畅、响应更快的 Web 应用程序。

1. `touch-action` 的基本概念和作用

首先，我们来回顾一下 touch-action 的基本概念。 touch-action 是一个 CSS 属性，用于指定触摸操作在特定元素上是否应该触发默认的浏览器行为。换句话说，它可以控制浏览器如何响应用户的触摸事件，例如滑动、缩放、平移等。

touch-action 属性可以接受多个值，其中最常见的包括：

auto: 默认值。浏览器根据自身逻辑处理触摸事件。
none: 禁用所有触摸相关的默认行为。这意味着用户无法滚动、缩放或执行任何其他基于触摸的交互。
pan-x: 允许水平方向的平移 (滑动)，禁止垂直方向的平移。
pan-y: 允许垂直方向的平移 (滑动)，禁止水平方向的平移。
pan-x pan-y: 允许水平和垂直方向的平移。
pinch-zoom: 允许捏合缩放。
manipulation: 这是一个复合值，相当于 pan-x pan-y pinch-zoom。它允许平移和捏合缩放，但禁止双击缩放。
pan-left: 允许向左平移。
pan-right: 允许向右平移。
pan-up: 允许向上平移。
pan-down: 允许向下平移。

touch-action 属性的本质是告诉浏览器，开发者希望如何处理触摸事件。 通过合理使用 touch-action，我们可以避免不必要的浏览器行为，提高应用程序的性能和响应速度。

2. 双击缩放的默认行为和问题

在移动设备上，双击通常会触发缩放操作。这是浏览器默认提供的便捷功能，允许用户快速放大网页内容。然而，在某些情况下，这种默认行为可能会带来问题：

影响用户体验: 如果开发者自定义了触摸交互逻辑（例如，使用 JavaScript 处理双击事件），浏览器默认的双击缩放可能会干扰这些自定义逻辑，导致用户体验不一致。
性能问题: 浏览器需要等待一段时间（通常是 300ms）才能确定用户是否真的要执行双击操作。这段延迟被称为“双击延迟 (Double Tap Delay)”，会影响应用程序的响应速度。尤其是在快速响应的 Web 应用中，这个延迟会显得格外明显。

3. `touch-action: manipulation` 如何禁用双击缩放

touch-action: manipulation 的核心作用之一就是禁用双击缩放。但它并非简单地阻止双击事件的发生，而是通过一种更巧妙的方式来实现：它告知浏览器，该元素上的触摸交互主要用于“manipulation”，即平移和缩放。 因此，浏览器会立即开始处理触摸事件，而无需等待双击延迟。

这种做法具有以下优点：

消除双击延迟: 由于浏览器不再需要等待双击，因此可以立即响应触摸事件，从而提高应用程序的响应速度。
避免不必要的缩放: manipulation 明确告诉浏览器，用户可能希望进行平移或缩放操作，而不是双击缩放。

代码示例：

<!DOCTYPE html>
<html>
<head>
<title>touch-action: manipulation Example</title>
<style>
  #container {
    width: 300px;
    height: 300px;
    background-color: lightblue;
    touch-action: manipulation; /* 关键：禁用双击缩放并优化触摸处理 */
  }

  #container:active {
    background-color: lightgreen; /* 用于观察触摸事件 */
  }
</style>
</head>
<body>

<div id="container">
  Touch me!
</div>

<script>
  const container = document.getElementById('container');

  container.addEventListener('touchstart', (event) => {
    console.log('touchstart');
    event.preventDefault(); // 阻止默认行为，例如滚动
  });

  container.addEventListener('touchmove', (event) => {
    console.log('touchmove');
    event.preventDefault(); // 阻止默认行为，例如滚动
  });

  container.addEventListener('touchend', (event) => {
    console.log('touchend');
    event.preventDefault(); // 阻止默认行为，例如滚动
  });

  container.addEventListener('dblclick', (event) => {
    console.log('dblclick - Should not be triggered with touch-action: manipulation');
    event.preventDefault();
  });
</script>

</body>
</html>

分析：

touch-action: manipulation;: 这是关键的一行代码。它告诉浏览器，#container 元素上的触摸操作主要用于平移和缩放，因此禁用双击缩放，并优化触摸事件的处理。
event.preventDefault();: 在 touchstart, touchmove 和 touchend 事件监听器中，event.preventDefault() 用于阻止浏览器的默认触摸行为，例如滚动。如果移除这些 preventDefault()，你可能会发现即使设置了 touch-action: manipulation，某些滚动行为仍然会发生，因为浏览器默认的滚动行为优先级更高。
dblclick 事件监听器: 这个监听器用于验证 touch-action: manipulation 是否成功禁用了双击缩放。如果 touch-action 工作正常，双击 container 元素不应该触发 dblclick 事件。
:active 伪类: 这个 CSS 规则用于在触摸 container 元素时改变背景颜色，以便更直观地观察触摸事件的发生。

在这个例子中，如果用户尝试双击 container 元素，浏览器不会执行缩放操作，而是立即触发 touchstart、touchmove 和 touchend 事件（如果手指移动了）。 dblclick 事件也不会被触发。这说明 touch-action: manipulation 成功地禁用了双击缩放，并消除了双击延迟。

4. `touch-action` 的底层优化原理

touch-action 的底层优化涉及浏览器对触摸事件的处理方式。当浏览器遇到 touch-action 属性时，它会根据属性值调整触摸事件的处理流程。

对于 touch-action: manipulation，浏览器会执行以下优化：

立即响应触摸事件: 浏览器不再等待双击延迟，而是立即开始处理 touchstart、touchmove 和 touchend 事件。
优化事件分发: 浏览器可能会优化触摸事件的分发，例如减少不必要的事件触发或合并相似的事件。
硬件加速: 在某些情况下，浏览器可能会利用硬件加速来提高平移和缩放操作的性能。
阻止默认行为: touch-action: manipulation 隐含地阻止了双击缩放的默认行为。

更深层次的理解：

浏览器内核（例如 Blink、WebKit、Gecko）在处理触摸事件时，会维护一个状态机。这个状态机根据触摸事件的类型、位置和时间等信息，来决定如何处理这些事件。 touch-action 属性实际上是修改了这个状态机的行为。

当 touch-action: manipulation 被应用时，状态机就会进入一种 “manipulation” 模式。在这种模式下，状态机不再关注双击事件，而是更专注于平移和缩放操作。这使得浏览器可以更快地响应触摸事件，并提供更流畅的用户体验。

5. `touch-action` 的兼容性

touch-action 属性具有良好的浏览器兼容性。它被所有主流浏览器（包括 Chrome、Firefox、Safari、Edge 和 Opera）支持。

浏览器	支持情况
Chrome	支持
Firefox	支持
Safari	支持
Edge	支持
Opera	支持
iOS Safari	支持
Android Chrome	支持

虽然 touch-action 的兼容性很好，但仍然建议在使用时进行一些兼容性处理，以确保在旧版本浏览器上的表现符合预期。可以使用 CSS 前缀或 JavaScript 来实现兼容性处理。

CSS 前缀示例：

.element {
  touch-action: manipulation; /* 标准语法 */
  -ms-touch-action: manipulation; /* IE10+ */
}

JavaScript 兼容性检测示例：

if ('touchAction' in document.documentElement.style) {
  // 支持 touch-action
  console.log('touch-action is supported');
} else {
  // 不支持 touch-action，需要使用其他方法来禁用双击缩放
  console.log('touch-action is not supported');
  // 可以使用 meta 标签或 JavaScript 来禁用双击缩放
}

6. 其他禁用双击缩放的方法

除了 touch-action: manipulation 之外，还有其他几种方法可以禁用双击缩放：

meta 标签: 可以使用 meta 标签来禁用整个页面的缩放。
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
缺点: 这种方法会禁用整个页面的缩放，包括捏合缩放，这可能会影响用户体验。
JavaScript: 可以使用 JavaScript 来阻止 dblclick 事件的默认行为。
```
document.addEventListener('dblclick', function(event) {
  event.preventDefault();
}, { passive: false });
```
缺点: 这种方法仍然会受到双击延迟的影响。
CSS user-select: none: 虽然 user-select: none 主要用于禁用文本选择，但在某些情况下，它也可以间接影响双击缩放行为。

缺点: 这种方法并不是专门用于禁用双击缩放的，因此效果可能不稳定。

总结：

touch-action: manipulation 是禁用双击缩放的最佳方法，因为它能够消除双击延迟，并提供更流畅的触摸体验。相比之下，其他方法要么会影响用户体验，要么会受到双击延迟的影响。

7. 实际应用场景

touch-action: manipulation 在以下场景中非常有用：

地图应用: 在地图应用中，用户通常需要平移和缩放地图。使用 touch-action: manipulation 可以确保平移和缩放操作的流畅性，并避免不必要的双击缩放。
图片浏览器: 在图片浏览器中，用户可能需要放大和缩小图片。 touch-action: manipulation 可以提供更好的缩放体验。
游戏: 在游戏中，触摸交互通常非常复杂。使用 touch-action: manipulation 可以避免浏览器默认的触摸行为干扰游戏逻辑。
自定义滚动容器: 当你使用 JavaScript 实现自定义滚动容器时，touch-action: manipulation 可以防止浏览器默认的滚动行为与你的自定义逻辑冲突。
任何需要精确触摸控制的 Web 应用: 总而言之，任何需要精确触摸控制的 Web 应用都可以从 touch-action: manipulation 中受益。

示例：自定义滚动容器

<!DOCTYPE html>
<html>
<head>
<title>Custom Scroll Container</title>
<style>
  #scroll-container {
    width: 300px;
    height: 200px;
    overflow: hidden; /* 隐藏溢出的内容 */
    position: relative;
  }

  #scrollable-content {
    position: absolute; /* 绝对定位，使其可以滚动 */
    width: 600px; /* 内容宽度大于容器宽度，实现水平滚动 */
    height: 200px;
    background-color: #f0f0f0;
    touch-action: pan-x; /* 允许水平滚动，禁用其他触摸行为 */
  }

  .item {
    width: 100px;
    height: 100%;
    float: left;
    text-align: center;
    line-height: 200px;
  }

  .item:nth-child(odd) {
    background-color: #ddd;
  }

  .item:nth-child(even) {
    background-color: #eee;
  }
</style>
</head>
<body>

<div id="scroll-container">
  <div id="scrollable-content">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</div>

<script>
  const scrollContainer = document.getElementById('scroll-container');
  const scrollableContent = document.getElementById('scrollable-content');
  let startX;
  let scrollLeft;

  scrollContainer.addEventListener('mousedown', (e) => {
    startX = e.pageX - scrollContainer.offsetLeft;
    scrollLeft = scrollContainer.scrollLeft;
  });

  scrollContainer.addEventListener('mouseleave', () => {
  });

  scrollContainer.addEventListener('mouseup', () => {
  });

  scrollContainer.addEventListener('mousemove', (e) => {
     if(!startX) return;
    e.preventDefault();
    const x = e.pageX - scrollContainer.offsetLeft;
    const walk = (x - startX) * 1; //scroll-fast
    scrollContainer.scrollLeft = scrollLeft - walk;
  });

  scrollContainer.addEventListener('touchstart', (e) => {
    startX = e.touches[0].pageX - scrollContainer.offsetLeft;
    scrollLeft = scrollContainer.scrollLeft;
  });

  scrollContainer.addEventListener('touchend', () => {
  });

  scrollContainer.addEventListener('touchmove', (e) => {
     if(!startX) return;
    e.preventDefault();
    const x = e.touches[0].pageX - scrollContainer.offsetLeft;
    const walk = (x - startX) * 1; //scroll-fast
    scrollContainer.scrollLeft = scrollLeft - walk;
  });
</script>

</body>
</html>

在这个例子中，touch-action: pan-x 允许用户水平滚动 scrollable-content，同时禁用其他触摸行为，例如垂直滚动和双击缩放。这使得用户可以更专注于水平滚动操作。

8. 最佳实践

仅在必要时使用 touch-action: 不要过度使用 touch-action。只有在需要禁用浏览器默认的触摸行为或优化触摸交互时才使用它。
选择合适的 touch-action 值: 根据具体的应用场景选择合适的 touch-action 值。例如，如果只需要允许水平滚动，则使用 touch-action: pan-x，而不是 touch-action: manipulation。
进行兼容性处理: 虽然 touch-action 的兼容性很好，但仍然建议在使用时进行一些兼容性处理。
测试在不同设备上的表现: 在不同的设备上测试 touch-action 的表现，以确保用户体验一致。
结合 JavaScript 使用: 可以结合 JavaScript 来实现更复杂的触摸交互逻辑。例如，可以使用 JavaScript 来检测触摸事件的类型和位置，并根据这些信息来执行不同的操作。

总结一下

touch-action: manipulation 是一种强大的 CSS 属性，可以优化 Web 应用程序的触摸交互。通过禁用双击缩放并消除双击延迟，它可以提高应用程序的响应速度和用户体验。理解 touch-action 的底层机制，并结合实际应用场景，可以帮助我们构建更流畅、更响应的 Web 应用程序。合理使用可以提高触摸交互的流畅性，避免不必要的浏览器行为干扰，最终提升用户体验。

更多IT精英技术系列讲座，到智猿学院

CSS touch-action: manipulation 的底层优化：双击缩放延迟的秘密

1. touch-action 的基本概念和作用

2. 双击缩放的默认行为和问题

3. touch-action: manipulation 如何禁用双击缩放

4. touch-action 的底层优化原理

5. touch-action 的兼容性