离开 iframe 时 Mouseup 丢失：导致输入反向
Posted
技术标签:
【中文标题】离开 iframe 时 Mouseup 丢失：导致输入反向【英文标题】：Mouseup lost when leaving iframe: leads to reversed input 【发布时间】：2019-02-11 23:44:00 【问题描述】：TL;DR 问题：
一些 javascript 如何告诉窗口鼠标按钮已被释放？由于跨域 iframe，mouseup 事件正在丢失。我可以检测到问题已经发生，但我不知道该怎么做才能治愈它。如果我可以强制鼠标指针位置，问题就会消失；但不允许 javascript 更改鼠标指针位置。如果我可以“触发 mouseup”，那么问题就会消失，因为它将取代丢失的 mouseup 事件；但是在新的 mouseup 事件上使用 dispatchEvent 什么都不做。
情况：
任何最新版本的 Chrome，任何操作系统。 包含位于内部的 iframe 的外部文档。完全不需要 javascript。 外部文档和内部 iframe 文档托管在不同的域上，都是 https。不是同一基域的不同子域，而是实际上不同的域。我的示例使用 www.pressero.com 和 client-prototype.dev2.edocbuilder.com。无论证书是否有效（我的有效），问题仍然存在。 iframe 中的文本框输入，位于或靠近左边缘。标准 LTR 文本方向。 几乎是最小的示例：Demo1 链接不再有效。 为了方便更改 iframe src，在外部文档中有一点点 javascript。删除此 javascript 完全没有效果。 重要限制： 仅在基于 Chrome 和 Chromium 的浏览器中发生；不是 Firefox、Safari、Edge 或 IE。 一些对于是否所有 Chrome 客户端都发生相同的情况存在歧义。我亲自在运行 Chrome 68 或 69 的大约五台不同的 Windows PC 上重现了相同的行为。一位同事在运行 Chrome 69 的 Mac 上和在同一台 Mac 上运行的 Windows VM 中的 Chrome 69 上得到的结果略有不同。触发问题：
用户尝试选择文本框输入中的所有文本，使用鼠标，将鼠标从文本框的末尾移到开头。 无意中，用户将鼠标指针移过左边缘，因此离开 iframe 进入外部文档。 当鼠标指针离开 iframe 后，用户松开鼠标左键。 当鼠标用于选择文本时，才会发生 em>当指针最终在左按钮释放时的iframe外部时才会出现。其他选择文本的方法不会导致该症状： ctrl-A 全选 进入字段 使用 shift-arrows 选择文本 使用鼠标从左到右选择文本 使用鼠标选择文本，但请注意释放鼠标按钮时指针位于 iframe 内另一种实现反向插入文本的方法：
将鼠标指针放在文本框的左上角。 按住鼠标左键。 键入文本。它是反向插入的，因为在每次击键后，插入点都会重新定位到刚刚键入的字符之前。 这仅用于说明不良行为。这显然不是错误，因为它是一种人为的展示方式。感知症状：
松开左键后键入的文本以相反的顺序插入：即，键入“abcde”将显示为“edcba”，插入点位于第一个字符的左侧。相关症状：
如果正在使用 javascript，例如调整对象大小或在画布上拖动对象的功能，则即使在 iframe 外释放左键后，拖动仍将继续。即使将指针移回 iframe 内，拖动也会继续。 确实是mouseup事件丢失的事件是通过在Iframe文档中的body上的body上的鼠标到鼠标来证明。如果在指针位于 iframe 内时释放鼠标按钮，则会发生警报；如果在指针位于 iframe 之外时释放鼠标按钮，则不会发生这种情况。
我再次强调 ONLY CHROME 有这种行为。在 Firefox、Edge 或 IE 中执行完全相同的操作，无论鼠标指针在哪里，都会立即检测到鼠标按钮释放。
尝试的解决方法：
建议用户注意鼠标位置。不是流行的解决方案。 Javascript 应用于文本框以在文本框获得焦点时全选。这样就无需使用鼠标进行选择，从而避免用户遇到问题。但是，无法选择文本的一小部分而不是整个文本。 移动文本框使其不靠左边缘。这使得当指针在 iframe 之外时用户不太可能放手。捕捉丢失的 mouseup 事件：
通过将事件处理程序附加到外部文档中的<body>，我可以捕获鼠标。然后我可以使用标准的 postMessage 技术来告诉内部 iframe 窗口 mouseup 发生了。内部 iframe 知道在拖动过程中哪个元素处于活动状态，这很好。但是，我在实际模拟 mouseup 事件时一点运气都没有。我已经尝试过triggerMouseEvent 技术here。它运行没有错误，但它显然没有做任何事情。
这里的演示有上面的最小示例，加上在外部文档中捕获 mouseup 的管道，向内部文档发布消息，然后调用 triggerMouseEvent: Demo2 LINK NO LONGER VALID强>
另一种奇怪的可能性
在尝试创建最小示例时，我发现可能以某种方式涉及到盒子模型。 Demo1a 链接不再有效 em>与上面的演示相同，除了iframe元素的高度为710px而不是700px。 在我的测试机器上，这消除了错误。在我同事的测试机器上，错误仍然存在。
可能与 Chromium 相关的跟踪问题：
269917 preventDefault on mousedown prevents proper handling of mouse events in iframes 2013 年 8 月 8 日开业；最后评论 2018 年 6 月 18 日 我提到它是因为它涉及到 iframe 之外的 mouseup。如上所述，即使根本没有使用 javascript，我们的问题也会发生。编辑 2018-09-25
我已提交Chromium issue #882491。它还没有看到任何真正的活动。
编辑 2020-08-31
自从我离开了我工作的公司，演示链接不再有效。
【问题讨论】：
在 95.0.4638.69 中仍然存在。易于复制，在类似搜索字段的输入中选择文本，用鼠标从右到左选择它，然后在 adsense 广告上释放鼠标按钮。输入 abc 并读取为 cbc。 我得到了同样的@Zoltán。就我而言，我在联系表格旁边的 iframe 中有一个谷歌地图。当用户通过拖动选择表单字段中的文本时，如果他们在鼠标上移时走得太远而无法超过 iframe，那么随后输入的任何后续文本都会反转（即光标停留在字符串开头）。 【参考方案1】：这个错误已经在 Chrome 70 中得到修复，该版本已于 2018 年 10 月 16 日发布。我已经在 Beta 通道中使用 Chrome 70 进行了测试，我确认它确实已修复。
【讨论】：
我在 Chrome 版本 72.0.3626.119（官方构建）（64 位）中遇到了同样的问题，这是最新版本。我也可以在 Chromium 上复制。我应该重新打开一个问题吗？ @Onix - 评论 #882491 或提交提及 #882491 的新问题 这里一样，最新版本没有修复。对于一些解决方法或其他任何其他想法？ 我在使用 Chromium 版本 76.0.3809.146 和电子版本 6.1.2 时仍然遇到同样的问题。 该问题在 Google Chrome 88 中仍然存在。以上是关于离开 iframe 时 Mouseup 丢失：导致输入反向的主要内容，如果未能解决你的问题，请参考以下文章