@panzoom/panzoom操作iframe时，鼠标悬停元素时缩放平移失效如何解决？

iframe是独立的浏览上下文，鼠标悬停在其区域内时，wheel、鼠标拖拽等事件会被iframe自身拦截，无法冒泡到父元素，导致原来绑定在父元素的事件监听器无法响应。以下是两种可行的解决方案：

方案一：直接给iframe绑定事件监听器（支持与iframe交互） #

这种方法通过给iframe元素直接绑定事件，让panzoom能捕获到iframe区域内的鼠标操作，同时保留iframe的交互能力。

JavaScript #

const pz = document.getElementById('panzoom');
const panzoom = Panzoom(pz, { canvas: true, maxScale: 5 });

// 保留父元素的事件监听，处理iframe外部的操作
pz.parentElement.addEventListener('wheel', panzoom.zoomWithWheel);

// 处理iframe内的缩放
pz.addEventListener('wheel', (e) => {
  e.preventDefault(); // 阻止页面默认滚动行为
  panzoom.zoomWithWheel(e);
});

// 处理iframe内的平移
let isDragging = false;
pz.addEventListener('mousedown', (e) => {
  isDragging = true;
  e.preventDefault(); // 阻止iframe默认的选中/拖拽行为
  panzoom.startPan(e);
});

document.addEventListener('mousemove', (e) => {
  if (isDragging) panzoom.pan(e);
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  panzoom.endPan();
});

HTML（无需修改） #

<script src="https://unpkg.com/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
<div style="width:1000px; height:600px; border: 1px solid black;">
    <iframe id="panzoom" style="width:500px; height:300px; border: 10px solid black;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiCNMl4OJrlzNToGd32IJd4RShAtxIMJb2hg&s"></iframe>
</div>

方案二：添加遮罩层（无需与iframe交互时使用） #

如果不需要和iframe内的内容交互，可以在iframe上方添加一个透明遮罩层，让鼠标事件被遮罩捕获后传递给panzoom，实现更简洁的处理。

HTML #

<script src="https://unpkg.com/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
<div style="width:1000px; height:600px; border: 1px solid black; position: relative;">
    <iframe id="panzoom" style="width:500px; height:300px; border: 10px solid black;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiCNMl4OJrlzNToGd32IJd4RShAtxIMJb2hg&s"></iframe>
    <!-- 透明遮罩层，覆盖整个容器 -->
    <div id="panzoom-mask" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: auto;"></div>
</div>

JavaScript #

const pz = document.getElementById('panzoom');
const mask = document.getElementById('panzoom-mask');
const panzoom = Panzoom(pz, { canvas: true, maxScale: 5 });

// 将事件绑定到遮罩层
mask.addEventListener('wheel', panzoom.zoomWithWheel);
mask.addEventListener('mousedown', panzoom.startPan);
document.addEventListener('mousemove', panzoom.pan);
document.addEventListener('mouseup', panzoom.endPan);

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