利用Pointer Events实现不同iFrame内的多点触控支持

这个需求刚好是Pointer Events设计的核心场景之一——通过唯一的pointerID区分不同的输入源（这里就是两个用户的触摸操作），确保各自的交互互不干扰。下面是具体的实现步骤和代码示例：

核心思路 #

每个触摸点（无论是哪个用户的手指）都会被分配一个唯一的pointerID，我们只需要维护一个pointerID与用户区域的映射关系，在事件传递过程中过滤掉不属于当前区域的输入，就能保证两个用户的操作完全独立。

具体实现 #

1. HTML结构 #

先划分两个各占屏幕一半的用户区域，每个区域包含对应的iframe：

<div class="user-area" id="user1Area">
  <iframe src="user1-page.html"></iframe>
</div>
<div class="user-area" id="user2Area">
  <iframe src="user2-page.html"></iframe>
</div>

2. CSS布局 #

让两个区域平分屏幕，确保iframe占满整个区域：

body {
  margin: 0;
  padding: 0;
}
.user-area {
  width: 50%;
  height: 100vh;
  float: left;
  position: relative;
}
.user-area iframe {
  width: 100%;
  height: 100%;
  border: none;
}

3. JavaScript逻辑 #

通过Pointer Events的事件链和pointerID映射来实现隔离：

// 维护pointerID到用户区域的映射表
const pointerUserMap = new Map();

// 获取两个用户区域元素
const user1Area = document.getElementById('user1Area');
const user2Area = document.getElementById('user2Area');

// 当触摸按下时，记录当前pointerID对应的用户区域
function onPointerDown(e) {
  const targetArea = e.currentTarget;
  pointerUserMap.set(e.pointerId, targetArea);
}

// 触摸结束或取消时，移除映射记录
function onPointerEnd(e) {
  pointerUserMap.delete(e.pointerId);
}

// 核心过滤逻辑：只允许当前pointerID对应的区域响应事件
function filterPointerEvents(e) {
  const assignedArea = pointerUserMap.get(e.pointerId);
  // 如果当前事件目标不在该pointerID对应的区域内，阻止事件传递
  if (!assignedArea || !assignedArea.contains(e.target)) {
    e.preventDefault();
    e.stopPropagation();
    return;
  }
  // 否则让事件正常传递到iframe内的按钮/链接
}

// 给用户区域绑定按下事件，初始化映射
user1Area.addEventListener('pointerdown', onPointerDown);
user2Area.addEventListener('pointerdown', onPointerDown);

// 在document层面监听结束/取消事件，确保映射被清理
document.addEventListener('pointerup', onPointerEnd);
document.addEventListener('pointercancel', onPointerEnd);

// 在捕获阶段过滤所有Pointer Events，确保事件到达iframe前被处理
document.addEventListener('pointerdown', filterPointerEvents, true);
document.addEventListener('pointermove', filterPointerEvents, true);
document.addEventListener('pointerup', filterPointerEvents, true);

关键细节解释 #

• pointerUserMap的作用：每个触摸点的pointerID是唯一且在整个触摸周期内不变的，所以我们可以用它来标记这个输入属于哪个用户区域。
• 捕获阶段处理事件：使用addEventListener的第三个参数true，让过滤逻辑在事件向下传递到iframe之前就执行，避免iframe内的默认行为干扰。
• 跨域iframe兼容：如果iframe内的页面和父页面不同源，父页面无法直接操作iframe内部元素，但Pointer Events会正常冒泡到父页面，所以这个方案依然有效。
• 浏览器支持：现在主流浏览器（Chrome、Edge、Safari 13+、Firefox）都完全支持Pointer Events，不需要额外polyfill。

内容的提问来源于stack exchange，提问作者Trickmantj