仅当两个触摸都在同一个窗格中时，如何启用双指缩放

Question

我有一个包含多个窗格的页面（请参阅下面的快照 1）。我想仅将捏缩放限制为特定窗格（例如 A、B）

目前，我使用 css touch-action 和 user-scalable=no 控制捏缩放。
但我不确定我做对了。这就是我所做的。一世，

• 将 user-scalable=no 放在 html 页面的顶部（参见代码段 1）

• 在我想禁用捏缩放的 div 中填充“触摸动作：无”

• 在我想启用捏缩放的 div 中填充“触摸动作：捏缩放”

但每隔一段时间我就会发现另一个边缘情况，在不应该启用缩放的情况下。

另外，我想将缩放限制为仅当两个触摸都在同一个窗格中时（例如 A）。

当前，如果一个触摸在窗格 A 中，另一个在窗格 B 中，则窗格 A 和 B 都会缩放。
这发生在显示区域较小的设备中，用户在捏合和缩放时多次触摸 2 个窗格。
这会导致两个窗格都缩放，这让用户感到困惑。

我的问题是：

1. 除特定 div 外，在任何地方禁用捏合缩放的正确方法是什么

2. 对于启用缩放的区域，如何启用缩放，仅当双指开始触摸同一区域（div）

谢谢

---

快照 1 - 具有多个窗格的图像

snippet1 - 使用 css touch-action 和 user-scalable=no 控制双指缩放

cat index.html

...

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

...

cat main.css

...

#navbar1{

    touch-action: none;

}

...

Answer 1

解决方案是使用event.targetTouches.length来检测和丢弃触摸不是从同一个 DOM 元素开始的情况。