@panzoom/panzoom 当光标悬停在元素上时不起作用

Question

const pz = document.getElementById('panzoom');
    console.log(pz)
    const panzoom = Panzoom(pz, {canvas: true, maxScale:5})
    pz.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)

<script src="https://unpkg.com/@panzoom/[email protected]/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>

我正在使用这个 @panzoom/panzoom 包来平移缩放 iframe 元素。我的代码如下。但是，我发现平移和缩放仅在鼠标光标位于 iframe 之外时才有效。即使光标位于 iframe 元素上方，如何才能使平移和缩放仍然有效？

Answer 1

答案是在 iframe 的 CSS 中添加pointer-events: none，这样它就不会与图像上的点击事件相关联。请注意，由于 iframe 本身没有平移缩放库，因此您无法使用父文档的平移缩放 js 从外部设置它。

这是代码片段：

const pz = document.getElementById('panzoom');
    console.log(pz)
    const panzoom = Panzoom(pz, {canvas: true, maxScale:5})
    pz.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)

iframe{
  pointer-events: none;
}

<script src="https://unpkg.com/@panzoom/[email protected]/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>

现在光标移动按预期显示。