如何解决iframe点击事件无法监听及拖拽实现难题

核心原因是iframe作为独立的文档节点，会拦截所有点击事件——同域下事件可能无法正常冒泡到父页面，跨域下则完全无法穿透到外层元素。以下分场景给出解决方案：

一、同域iframe场景 #

直接监听iframe内部文档的点击事件，再触发外层div的逻辑：

// 等待iframe加载完成后绑定事件
$(".draggable iframe").on("load", function() {
  // 访问iframe内部的document
  $(this.contentDocument).on("click", function() {
    console.log("hello");
    // 这里写入你的拖拽触发逻辑
  });
});

如果需要事件冒泡到外层div，也可以在iframe内部的点击事件中手动触发div的事件：

$(this.contentDocument).on("click", function() {
  $(".draggable").trigger("click");
});

二、跨域iframe场景 #

跨域无法访问iframe内部文档，只能通过透明遮罩层捕获点击事件：

1. 给包裹div添加一个全屏透明的遮罩层，层级高于iframe：

<div class="draggable" style="position: relative;">
  <iframe src="https://跨域地址.com" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"></iframe>
  <!-- 透明遮罩层 -->
  <div class="iframe-mask" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 1;"></div>
</div>

2. 给遮罩层绑定点击/拖拽事件：

$(".iframe-mask").on("click", function() {
  console.log("hello");
  // 拖拽逻辑
});

优化：同时允许iframe交互与拖拽 #

如果需要让iframe平时能正常交互，仅在拖拽时捕获事件，可以动态切换遮罩层的pointer-events属性：

let isDragging = false;

// 默认允许点击穿透到iframe
$(".iframe-mask").css("pointer-events", "none");

// 监听鼠标按下事件，启动拖拽时捕获点击
$(".draggable").on("mousedown", function() {
  isDragging = true;
  $(".iframe-mask").css("pointer-events", "auto");
  console.log("hello");
}).on("mouseup mouseleave", function() {
  isDragging = false;
  $(".iframe-mask").css("pointer-events", "none");
});

三、补充：事件捕获模式（仅同域有效） #

利用事件捕获阶段的特性，在div上以捕获模式绑定事件，跳过iframe的冒泡拦截：

// 第三个参数设为true开启事件捕获
$(".draggable").on("click", null, true, function() {
  console.log("hello");
});

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