如何捕获包含iframe子元素的div的mousedown事件

问题原因 #

iframe是独立的浏览上下文，会独占自身区域内的鼠标事件，事件不会冒泡到父页面的DOM节点，因此直接给父div绑定的mousedown事件在点击iframe区域时不会触发。普通DOM元素（如a标签）的事件会正常冒泡，因此可以触发绑定在父div上的事件。

复现代码 #

JavaScript逻辑 #

jQuery(".test").on("mousedown", ()=> console.log("Test"))

HTML结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <a href="/" >Test</a>
</div>

<div class="test">
  <iframe src="https://www.google.com/" ></iframe>
</div>

实现方案 #

根据业务场景可选以下三种方案：

• 透明遮罩覆盖方案（通用性最高，无跨域限制）
  在iframe上方叠加一层与iframe尺寸完全一致的透明遮罩元素，鼠标点击事件会先落在遮罩层，自然可以冒泡到父div。
  实现要点：父div设置position: relative，遮罩层设置position: absolute并铺满父div区域，z-index高于iframe，背景设为透明即可。如果需要和iframe内容交互，可以在父div的mousedown逻辑执行完成后，临时隐藏遮罩层并重放鼠标事件到iframe，不影响iframe内部的正常操作。
• 窗口失焦判断方案（无DOM改动，无跨域限制）
  点击iframe区域时父窗口会触发blur事件，结合全局记录的鼠标坐标，判断失焦时鼠标是否落在目标div范围内，即可间接捕获点击iframe的操作。
  参考实现：

  // 实时记录鼠标位置
  let currentX = 0, currentY = 0;
  document.addEventListener('mousemove', e => {
    currentX = e.clientX;
    currentY = e.clientY;
  })
  
  // 监听窗口失焦
  window.addEventListener('blur', () => {
    const target = document.querySelector('.test:has(iframe)');
    if (!target) return;
    const rect = target.getBoundingClientRect();
    // 判断鼠标是否在目标div区域内
    const isClickOnTarget = currentX >= rect.left 
      && currentX <= rect.right 
      && currentY >= rect.top 
      && currentY <= rect.bottom;
    if (isClickOnTarget) {
      console.log('Test');
      // 此处执行mousedown对应的业务逻辑
    }
  })
  

  注意：该方案需要额外过滤键盘切换窗口、点击浏览器UI等非鼠标点击iframe导致的失焦场景。
• 同域iframe内部绑定方案（精度最高，仅支持同域场景）
  如果iframe与父页面同域，不受同源策略限制，可以直接在iframe加载完成后，给iframe内部的document绑定mousedown事件，触发时执行对应逻辑即可。
  参考实现：

  const iframe = document.querySelector('.test iframe');
  iframe.addEventListener('load', () => {
    iframe.contentDocument.addEventListener('mousedown', () => {
      console.log('Test');
      // 此处执行mousedown对应的业务逻辑
    })
  })
  

  跨域场景下该方案无法使用，没有权限访问iframe的contentDocument对象。

内容的提问来源于stack exchange，提问作者Daniel Pérez Rodríguez