Ros*_*ser
10
iframe
google-chrome
chromium
mouseup
TL; DR问题:
一些javascript如何告诉窗口鼠标按钮已被释放？由于跨域iframe,mouseup事件正在丢失.我可以发现问题已经发生,但我不知道该怎么做才能治愈它.如果我可以强制鼠标指针位置,问题就会消失; 但是不允许javascript更改鼠标指针位置.如果我能"点击鼠标"那么问题就会消失,因为它会取代丢失的鼠标事件; 但在新的mouseup事件上使用dispatchEvent什么都不做.
情况:
- 任何最新版本的Chrome,任何操作系统.
- 包含位于内部的iframe的外部文档.根本不需要javascript.
- 在不同域上托管的外部文档和内部iframe文档,均为https.相同基域的子域不同,但实际上是不同的域.我的示例使用www.pressero.com和client-prototype.dev2.edocbuilder.com.无论证书是否有效(我的是),问题仍然存在.
- iframe中的文本框输入,位于左边缘或靠近左边缘.标准LTR文本方向.
- 几乎没有例子:Demo1.这在外部文档中有一点点javascript,以方便更改iframe src.删除此JavaScript根本没有任何效果.
重要限制:
- 偏偏只用铬和铬的浏览器; 不是Firefox,Safari,Edge或IE.
- 对于所有Chrome客户端是否完全相同,存在一些含糊不清的问题.我个人在运行Chrome 68或69的大约五台不同的Windows PC上亲自复制了相同的行为.一位同事在运行Chrome 69的Mac上以及在同一台Mac上运行的Windows VM中的Chrome 69上获得了略微不同的结果.
触发问题:
- 用户尝试选择文本框输入中的所有文本,使用鼠标,从文本框末尾开始移动鼠标.
- 无意中,用户将鼠标指针移过左边缘,因此将iframe移出外部文档.
- 用户在鼠标指针离开iframe后释放鼠标左键.
- 发生只有当鼠标被用于选择文本和仅当指示器在左按钮释放的时间的IFRAME外结束.其他选择文本的方法不会导致以下症状:
- ctrl-A选择全部
- 进入该领域
- 使用shift-arrows选择文本
- 使用鼠标选择文本,但从左到右
- 使用鼠标选择文本,但在释放鼠标按钮时要小心指针位于iframe内部
制作反向插入文本的另一种方法是:
- 将鼠标指针放在文本框的左上角.
- 按住鼠标左键.
- 输入文字.它是反向插入的,因为在每次击键后,插入点会在刚输入的字符之前重新定位.
- 这仅仅是为了说明不希望的行为.这显然不是bug,因为它是一种人为的表现方式.
感知症状:
- 在放开左按钮后键入的文本以相反的顺序插入:即,键入"abcde"将显示为"edcba",插入点位于第一个字符的左侧.
相关症状:
- 如果正在使用javascript,例如用于调整对象大小或在画布上拖动它的功能,则即使在iframe外部释放左按钮后,拖动仍将继续.即使将指针移回iframe内部,拖动也会继续.
mouseup通过在iframe文档中附加alert()鼠标来证明事实确实是丢失的事件body.如果在指针位于iframe内部时释放鼠标按钮,则会发出警报; 如果在指针位于iframe之外时释放鼠标按钮,则不会发生这种情况.
我再次强调,只有CHROME有这种行为.在Firefox,Edge或IE中执行完全相同的操作,无论鼠标指针在何处,都会立即检测到鼠标按钮释放.
尝试了解决方法:
- 建议用户注意他们的鼠标位置.不是流行的解决方案.
- 应用于文本框的Javascript以在文本框聚焦时选择所有内容.这使得不必使用鼠标进行选择,因此可以防止用户遇到问题.但是,它使得无法选择文本的一小部分而不是整个文本.
- 移动文本框使其不会与左边缘对齐.这使得当指针位于iframe之外时用户不太可能放手.
捕获丢失的mouseup事件:
通过将事件处理程序附加到<body>外部文档中,我可以捕获鼠标.然后我可以使用标准的postMessage技术告诉内部iframe窗口发生了mouseup.内部iframe知道在拖动过程中哪个元素处于活动状态,所以这很好.但是,在实际模拟mouseup事件时,我没有任何运气.我在这里试过这个triggerMouseEvent技术.它运行没有错误,但它显然没有做任何事情.这里的演示具有上面的最小示例,以及在外部文档中捕获mouseup的管道,将消息发布到内部文档,并调用:Demo2triggerMouseEvent
另一个奇怪的可能性
在尝试创建最小的示例时,我发现可能以某种方式涉及框模型.Demo1a与上面的demo1相同,只是iframe元素的高度为710px而不是700px.在我的测试机器上,这消除了错误.在我同事的测试机器上,bug仍然存在.
可能相关的跟踪Chromium问题:
编辑2018-09-25
我已提交Chromium问题#882491.它还没有看到任何真正的活动.