div内嵌iframe时鼠标/触摸移动跟随事件失效如何解决

事件失效的核心逻辑很简单：iframe是独立的浏览上下文，当光标/触摸点移动到iframe覆盖区域时，mousemove、touchmove事件会直接被iframe内部的document捕获，不会冒泡到外层页面的document上，你绑定在外层document上的监听回调自然不会触发，不是监听器本身出了问题。

根据你是否需要和iframe内部内容交互，可以选两种方案：

方案一：不需要操作iframe内容（实现最简单，全场景兼容） #

直接在iframe上层叠加一个和父div尺寸完全一致的透明遮罩，拦截所有落在div区域的指针事件，保证事件始终能传递到外层document，不需要改动原有JS逻辑，只需要给#my-div加一段CSS：

#my-div {
  width: 300px;
  height: 250px;
  background-color: #ffffff;
  position: absolute;
}
/* 新增透明遮罩层 */
#my-div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

这个方案的局限是遮罩会挡住iframe，无法点击、滚动iframe内部的内容。

方案二：需要正常操作iframe内容 #

这种情况要根据iframe的域名属性区分处理：

• 如果加载的是同域名页面：等iframe加载完成后，直接获取iframe内部的document对象，给它也绑定相同的移动事件监听即可，补充代码如下：

const iframe = document.querySelector("#my-div iframe");
iframe.onload = () => {
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  iframeDoc.addEventListener("mousemove", move);
  iframeDoc.addEventListener("touchmove", move);
};

• 如果加载的是跨域页面（比如示例中的example.com）：受浏览器同源策略限制，你无法直接访问iframe内部的对象，这种情况可以在拖动触发时临时覆盖透明遮罩，拖动结束后移除遮罩恢复iframe交互：
  1. 先新增拖动状态的遮罩样式：

  #my-div.dragging::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
  }
  

  2. 补充拖动状态切换的JS逻辑：

  // 按下/触摸开始时启用遮罩
  document.addEventListener("mousedown", () => {
    myDiv.classList.add("dragging");
  });
  document.addEventListener("touchstart", () => {
    myDiv.classList.add("dragging");
  });
  
  // 松开/触摸结束时移除遮罩
  const endDrag = () => myDiv.classList.remove("dragging");
  document.addEventListener("mouseup", endDrag);
  document.addEventListener("touchend", endDrag);
  document.addEventListener("touchcancel", endDrag);
  

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