Google chrome 离开iframe时鼠标悬停丢失：导致反向输入 TL；问题:

一些javascript如何告诉窗口鼠标按钮已经释放？由于跨域iframe，mouseup事件正在丢失。我能发现问题已经发生了，但我不知道该怎么做才能解决它。如果我可以强制鼠标指针的位置，问题就会消失；但是不允许javascript更改鼠标指针的位置。如果我可以“发射鼠标”，那么问题就会消失，因为它将取代丢失的鼠标事件；但是在新的mouseup事件上使用dispatchEvent不会产生任何效果

情况：

• 任何最新版本的Chrome，任何操作系统
• 包含位于内部的iframe的外部文档。根本不需要javascript
• 外部文档和内部iframe文档托管在不同的域上，都是https。不是同一基本域的不同子域，而是实际上不同的域。我的示例使用和client-prototype.dev2.edocbuilder.com。无论证书是否有效（我的证书是有效的），问题仍然存在
• iframe中的文本框输入，位于或靠近左边缘。标准LTR文本方向
• 几乎最小的示例：链接不再有效。为了方便修改iframe src，在外部文档中有一点点javascript。删除此javascript完全没有效果

重要限制：

• 仅在Chrome和基于Chrome的浏览器中发生；不是Firefox、Safari、Edge或IE
• 对于所有Chrome客户端是否发生相同的情况，存在一些模糊性。我个人在运行Chrome68或69的大约五台不同的Windows PC上复制了相同的行为。一位同事在运行Chrome69的Mac电脑上得到的结果与在同一台Mac电脑上运行的Windows虚拟机上得到的结果略有不同

引发问题的原因：

• 试图选择文本框输入中所有文本的用户，使用鼠标，将鼠标从文本框的末尾移到开头
• 不经意间，用户将鼠标指针移过左边缘，从而从iframe移到外部文档中
• 在鼠标指针离开iframe后，用户释放鼠标左键
• 仅当鼠标用于选择文本时，以及仅当鼠标左键释放时指针位于iframe之外时，才会发生。选择文本的其他方法不会导致该症状：
• 按住ctrl-A键以选择全部
• 跳进田野
• 使用shift箭头选择文本
• 使用鼠标从左到右选择文本
• 使用鼠标选择文本，但释放鼠标按钮时，请注意指针位于iframe内部

实现反向插入文本的另一种方法：

• 将鼠标指针放在文本框的左上角
• 按住鼠标左键
• 键入文本。它是反向插入的，因为每次击键后，插入点都会重新定位到刚刚键入的字符之前
• 这只是为了说明不希望发生的行为。这显然不是bug，因为它是一种人为的显示方式

感知症状：

• 松开左键后键入的文本按相反顺序插入：即键入“abcde”将显示为“edcba”，插入点位于第一个字符的左侧

相关症状：

• 如果正在使用javascript，例如用于调整对象大小或在画布上拖动对象的功能，则即使在iframe外部释放左按钮后，拖动仍将继续。即使将指针移回iframe内部，仍会继续拖动
• 通过在iframe文档中的

  正文

  上的mouseup上附加

  警报（）

  ，可以证明确实是

  mouseup

  事件丢失。如果在指针位于iframe内时释放鼠标按钮，则会发生警报；如果在指针位于iframe之外时释放鼠标按钮，则不会发生这种情况

我再次强调，只有CHROME具有这种行为。在Firefox、Edge或IE中执行完全相同的操作时，无论鼠标指针在何处，都会立即检测到鼠标按钮的释放

已尝试的变通办法：

• 建议用户注意鼠标位置。这不是一个受欢迎的解决方案
• Javascript应用于文本框，在文本框聚焦时选择all。这使得无需使用鼠标进行选择，从而防止用户遇到问题。然而，这使得不可能选择文本的一小部分而不是整个内容
• 移动文本框，使其不靠左边缘。这使得当指针在iframe之外时，用户不太可能放手

捕获丢失的mouseup事件： 通过将事件处理程序附加到外部文档中的

，我可以捕获鼠标。然后，我可以使用标准的postMessage技术告诉内部iframe窗口发生了鼠标点击。内部iframe知道在拖动过程中哪个元素处于活动状态，所以这很好。然而，我在实际模拟鼠标移动事件方面一点运气都没有。我尝试了

triggerMouseEvent

技术。它运行时没有错误，但它显然没有做任何事情。 这里的演示有上面的最小示例，加上在外部文档中捕获鼠标的管道，将消息发布到内部文档，并调用

triggerMouseEvent

：链接不再有效

另一种奇怪的可能性 在尝试创建最少的示例时，我发现可能涉及到box模型链接不再有效与上面的demo1相同，只是iframe元素