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

Question

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

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

• 将 user-scalable=no 放在 html 页面的顶部（参见 sn-p1）
• 在我要禁用捏合缩放的 div 中填充“touch-action: none”
• 在我要启用捏合缩放的 div 中填充“触摸动作：捏合缩放”

但我经常会发现另一种极端情况，在不应该启用缩放的地方启用缩放。

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

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

我的问题是：

1. 在除特定 div 之外的所有地方禁用捏合缩放的正确方法是什么

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

谢谢

---

snapshot1 - 具有多个窗格的图像

sn-p1 - 使用 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 元素开始的情况。