首先，这看起来像是一个铬虫，我已经提交了bug report。它运行缓慢，因此，如果有人遇到相似或相关的问题，我在这里主要提出一个解决方法的问题。

此外，出于可读性原因，代码示例也不符合HTML5。我只是显示一个简化的示例。

说明

在Chrome 78和Edge beta中，当有2个以上嵌套的iframe具有不同的原点并且元素重叠时， pointerout / pointerover 事件在iframe中的每次点击之间错开-仅当在 pointerdown 和 pointerup 之间至少移动了1px。在Chrome 77，Edge稳定版，Firefox和Safari上，这些事件仅在指针离开iframe或分别进入iframe时才触发，这是正确的和预期的行为。

在移除重叠元素时，Chrome 78的行为符合预期，但Edge beta却不起作用（Edge beta不受重叠元素大小写的影响）。

将iframe的原点设置为相似时（例如，两个localhost），在两种浏览器中的行为都一样。

复制

在包含以下文件的文件夹中启动服务器（为简单起见，类似于http-server）

a.html

<iframe src="http://127.0.0.1:[port]/b.html"></iframe>
<div style="height: 3px;
    width: 300px;
    position: absolute;
    top: 159px;
    left: 10px;
    right: 0px;
    background: green;"></div>

b.html

<iframe src="http://localhost:[port]/c.html"></iframe>

c.html

<button id="btn">Click</button>

<script type="text/javascript">
    var btn = document.getElementById('btn');

    btn.addEventListener('pointerdown',function() { console.log('down'); });
    btn.addEventListener('pointerup',function() { console.log('up'); });
    btn.addEventListener('pointerover',function() { console.log('over'); });
    btn.addEventListener('pointerout',function() { console.log('out'); });
    btn.addEventListener('pointerleave',function() { console.log('leave'); });
</script>

导航到localhost / a.html单击按钮，并在控制台中查看事件日志。

请注意，a.html和b.html中的iframe起源是不同的。使用该设置，如果您导航到127.0.0.1，它将正常运行，但在localhost上则无法运行。

如果您将a.html中的div移动到iframe之外，则可以使用。 （仅适用于Chrome 78）

问题

任何潜在的解决方法？理想情况下，通过JS或CSS来解决iframe的起源和领域并非总是可能的，也不是最佳的解决方案。

关于重叠的div，有时会与z-index混淆，但这并不是最好的解决方案，因为iframe可以包含重叠的元素。