为什么无法在iframe中捕获鼠标？

Question

更新：

这似乎是Chrome（可能是我的代码）中的错误，因为它可以在Firefox中工作

        | top window | iframe   | Google Maps
--------+------------+----------+--------------
Firefox |    Good    |   Good   |    Good
--------+------------+----------+--------------
Chrome  |    Good    |   Bad    |    Bad 
--------+------------+----------+--------------
Safari  |    Good    |   Bad    |    Good  
--------+------------+----------+--------------

不确定Google Maps如何解决Safari中以下代码段中的代码未起作用的问题。

Bug report to chrome, ignored for over a year。尝试加注星标以引起注意（或在下面发布替代方法？）

原始问题

是否有具体的原因导致浏览器不允许在iframe中捕获鼠标。

注意：“捕获鼠标”是指用户单击（鼠标向下移动）某个元素并且您想要跟随鼠标直到他们松开鼠标时的意思。

在顶级窗口（不是iframe）中，您可以这样做

const elem = document.querySelector('#elem');
const info = document.querySelector('#info');

elem.addEventListener('mousedown', handleMouseDown, true);

function handleMouseDown(e) {
  e.preventDefault();
  e.stopPropagation();
  
  document.addEventListener('mousemove', handleMouseMove, true);
  document.addEventListener('mouseup', removeMouseListeners, true);
  
  info.textContent = `listeners added`;
}

function handleMouseMove(e) {
  e.preventDefault();
  info.textContent = `${e.clientX},${e.clientY}`;
}

function removeMouseListeners(e) {
  document.removeEventListener('mousemove', handleMouseMove, true);
  document.removeEventListener('mouseup', removeMouseListeners, true);
  info.textContent = 'listeners removed';
}

#elem { background: red; padding: 1em; }

<div id="elem">click and drag outside window</div>
<div id="info"></div>

它有效。 Here's a link to a version that's not in an iframe。如果单击红色区域并将其拖动到元素外，甚至拖动到窗口外，页面将继续获取事件，这是一个很好的UX。这就是所有本机应用程序工作的程度。

不幸的是，一旦将该示例放入iframe，它就不再起作用。运行上面的代码段，在红色区域上单击并拖动，将鼠标移到框架外，事件停止，在框架外释放鼠标，然后将鼠标移回框架上方，并注意未发送mouseup事件即使您没有按下鼠标按钮，该元素也会开始获取事件。

我的问题是，浏览器不解决此问题的具体原因是什么？ 似乎好像没有任何安全问题吗？似乎与在窗口外部拖动与在框架外部拖动时没有什么不同。似乎将use capture = true传递给addEventListener时，浏览器可以像对待窗口一样对待iframe，在释放捕获之前不会有任何事件泄漏给父对象。

浏览器无法解决此问题吗？对iframe造成拖累是一种可怕的用户敌对UX。

注意：如果要查看此中断的示例，请嵌入google maps iframe，并注意您不能一直拖动到框架外，就像上面一样，如果用户在框架外放开鼠标，则地图是粘在鼠标上。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6006.922801276857!2d139.6993325020719!3d35.66665455496913!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cb46a006057%3A0xc502008398a3c24f!2z44CSMTUxLTAwNTIgVMWNa3nFjS10bywgU2hpYnV5YS1rdSwgWW95b2dpa2FtaXpvbm9jaMWNLCAyLCDkuK3lpK7luoPloLQ!5e0!3m2!1sen!2sjp!4v1537347056446" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>