Chromium 78 上嵌套 iframe 中的指针事件失败答案

【问题标题】：Misfired pointer events in nested iframes on Chromium 78Chromium 78 上嵌套 iframe 中的指针事件失败
【发布时间】：2019-11-07 21:20:55
【问题描述】：

首先，这看起来像一个铬错误，我已经提交了bug report。它进展缓慢，所以我在这里提出一个问题，主要是为了解决方法，如果其他人遇到类似或相关的问题。

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

说明

在 Chrome 78 和 Edge beta 中，当有 2 个以上不同来源的嵌套 iframe 并且存在重叠元素时，pointerout/pointerover 事件在 iframe 内的每次点击之间都会发生错误 - 仅当存在pointerdown 和 pointerup 之间至少移动 1px。在 Chrome 77、Edge stable、Firefox 和 Safari 上，这些事件仅在指针分别离开或进入 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 可以有重叠的元素。

【问题讨论】：

标签： javascript html css iframe chromium

【解决方案1】：

只是一个解决方法的想法：您可以将 out/leave 事件中的坐标与按钮元素内的最后一个已知位置进行比较。如果坐标相同，则忽略 out/leave 事件。此外，您可能还需要处理模糊事件。

假设您有一个向下处理程序，它设置一些变量（如当前位置、按下状态）并订阅移动事件。

您的移动处理程序只是更新当前位置。

您的 out/leave 处理程序将当前位置与事件位置进行比较。如果它们相等并且没有模糊事件，则忽略此事件并从处理程序返回。否则取消新闻、重置变量、取消订阅移动等。

【讨论】：