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

Question

我有一个包含多个窗格的页面（请参阅下面的快照 1）。我想仅将捏缩放限制为特定窗格（例如 A、B）目前，我使用 css touch-action 和 user-scalable=no 控制捏缩放。但我不确定我做对了。这就是我所做的。一世，将 user-scalable=no 放在 html 页面的顶部（参见代码段 1）在我想禁用捏缩放的 div 中填充“触摸动作：无”在我想启用捏缩放的 div 中填充“触摸动作：捏缩放”但每隔一段时间我就会发现另一个边缘情况，在不应该启用缩放的情况下。另外，我想将缩放限制为仅当两个触摸都在同一个窗格中时（例如 A）。当前，如果一个触摸在窗格 A 中，另一个在窗格 B 中，则窗格 A 和 B 都会缩放。这发生在显示区域较小的设备中，用户在捏合和缩放时多次触摸 2 个窗格。这会导致两个窗格都缩放，这让用户感到困惑。我的问题是：除特定 div 外，在任何地方禁用捏合缩放的正确方法是什么对于启用缩放的区域，如何启用缩放，仅当双指开始触摸同一区域（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 元素开始的情况。