离开iframe时Mouseup丢失:导致输入反向

问题描述

一些Javascript如何告诉窗口释放了鼠标键?由于跨域iframe，mouseup事件丢失了.我可以检测到问题已经发生，但是我不知道该怎么办.如果我可以强制鼠标指针定位，那么问题将消失.但不允许使用javascript更改鼠标指针的位置.如果我可以触发mouseup"，那么问题就会消失，因为它将替换掉丢失的mouseup事件.但是在新的mouseup事件上使用dispatchEvent则无济于事.

How can some javascript tell the window that the mouse button has been released? The mouseup event is being lost because of a cross-domain iframe. I can detect that the problem has happened but I don't know what to do to cure it. If I could force the mouse pointer position, the problem would go away; but no javascript is allowed to change the mouse pointer position. If I could "fire a mouseup" then the problem would go away, because it would replace the lost mouseup event; but using dispatchEvent on a new mouseup event does nothing.

• 任何最新版本的Chrome，任何操作系统.
• 外部文档，其中包含位于其中的iframe.完全不需要JavaScript.
• 托管在不同域(均为https)上的外部文档和内部iframe文档.同一基本域的子域没有区别，但实际上是不同的域.我的示例使用www.pressero.com和client-prototype.dev2.edocbuilder.com.证书是否有效(我的证书是否有效)仍然会发生问题.
• iframe中位于左边缘处或附近的文本框输入.标准LTR文字方向.
• 几乎是最小的示例: Demo1 . 此文件的外部文档中包含一小段JavaScript，以方便更改iframe src.删除此javascript完全没有效果.

• Any recent version of Chrome, any operating system.
• An outer document containing an iframe positioned inside. No javascript required at all.
• Outer document and inner iframe document hosted on different domains, both https. Not differing subdomains of the same base domain, but actually different domains. My examples use www.pressero.com and client-prototype.dev2.edocbuilder.com. Problem still happens whether or not certificates are valid (mine are).
• Textbox input in the iframe, positioned at or close to the left edge. Standard LTR text direction.
• Nearly minimal example: Demo1. This has one tiny bit of javascript in the outer doc, for convenience in altering the iframe src. Removing this javascript has no effect at all.

• 在基于Chrome和Chromium的浏览器中仅 发生；而不是Firefox，Safari，Edge或IE.
• 对于所有Chrome客户端是否都相同，存在 一些 的歧义.我已经在大约五台不同的运行Chrome 68或69的Windows PC上重现了相同的行为.一位同事在运行Chrome 69的Mac上以及运行在同一Mac上的Windows VM中的Chrome 69上获得了略有不同的结果.

• 用户试图使用鼠标在文本框输入中选择所有文本，将鼠标从文本框的末端移到开头.
• 用户不经意间将鼠标指针移过了左边缘，因此从iframe中移到了外部文档中.
• 用户在鼠标指针离开iframe后释放鼠标左键.
• 仅当使用鼠标选择文本且仅当鼠标左键释放时指针停留在iframe外部时，才发生 .选择文本的其他方法不会导致症状:
  • ctrl-A全选
  • 进入该字段
  • 使用移位箭头选择文本
  • 使用鼠标从左到右选择文本
  • 使用鼠标选择文本，但请注意，释放鼠标按钮时，指针应位于iframe内
  • User attempting to select all text in the textbox input, using the mouse, moving mouse from end of textbox towards beginning.
  • Inadvertently, user moves the mouse pointer past the left edge, and therefore out of the iframe into the outer document.
  • User releases the left mouse button after the mouse pointer has left the iframe.
  • Happens only when the mouse is used to select text and only when the pointer ends up outside the iframe at the time of left button release. Other methods of selecting text do not cause the symptom:
    • ctrl-A to select all
    • tabbing into the field
    • using shift-arrows to select text
    • using the mouse to select text but from left to right
    • using the mouse to select text but being careful that the pointer is inside the iframe when the mouse button is released
    • 将鼠标指针放在文本框的左上方.
    • 按住鼠标左键.
    • 输入文字.它是反向插入的，因为在每次击键之后，插入点都将重新定位到刚刚键入的字符之前.
    • 这仅是为了说明不良行为.显然这不是错误，因为它是人为显示的方式.
    • 松开向左按钮后键入的文本以相反的顺序插入:即，键入"abcde"将显示为"edcba"，插入点位于第一个字符的左侧.
    • 如果使用的是javascript，例如用于调整对象大小或在画布上拖动对象的功能，则即使在iframe外部释放左键后，拖动仍将继续.即使将指针移回iframe内，拖动仍会继续.
    • 通过将alert()附加到iframe文档中body上的mouseup上，可以证明确实确实丢失了mouseup事件.如果在指针位于iframe内的同时释放了鼠标按钮，则会发生警报；如果指针在iframe之外而释放鼠标按钮，则不会发生这种情况.
    • If javascript is in use, for example a feature for resizing an object, or dragging it around the canvas, then dragging will continue even after the left button has been released while outside the iframe. Even after moving the pointer back inside the iframe, dragging continues.
    • The fact that it is indeed the mouseup event being lost is proven by attaching an alert() to mouseup on the body in the iframe document. The alert happens if the mouse button is released while the pointer is inside the iframe; it does not happen if the mouse button is released while the pointer is outside the iframe.

    再次，我强调 仅铬色 具有此行为.在Firefox，Edge或IE中做同样的事情，无论鼠标指针在哪里，都可以立即检测到鼠标按钮的松动.

    Again, I emphasize that ONLY CHROME has this behavior. Doing the exact same thing in Firefox, Edge, or IE, the mouse button release is detected immediately no matter where the mouse pointer is.

    • 建议用户注意其鼠标位置.不是一个流行的解决方案.
    • 已将Javascript应用于文本框，以便在文本框处于焦点状态时将其全部选中.这样就不必使用鼠标进行选择，因此可以防止用户遇到问题.但是，这使得无法选择文本的一小部分而不是全部内容.
    • 移动文本框，使其不紧靠左边缘.这样一来，当指针位于iframe外部时，用户放手的可能性就会降低.

    通过将事件处理程序附加到外部文档中的<body>，我可以捕获mouseup.然后，我可以使用标准的postMessage技术来告诉内部iframe窗口发生了mouseup.内部iframe知道在拖动过程中哪个元素处于活动状态，所以很好.但是，我在实际模拟mouseup事件方面没有任何运气.我已经在此处尝试了triggerMouseEvent技术.它运行无误，但显然没有任何作用.这里的演示是上面的最小示例，另外还有一些管道来捕获外部文档中的mouseup，向内部文档中发布一条消息，然后调用triggerMouseEvent: Demo2

    By attaching an event handler to the <body> in the outer document, I can catch the mouseup. I can then use standard postMessage technique to tell the inner iframe window that the mouseup happened. The inner iframe knows what element was active during the drag, so that's good. However, I'm having no luck whatsoever at actually simulating the mouseup event. I've tried the triggerMouseEvent technique here. It runs without error, but it does not apparently do anything.Demonstration here has the minimal example from above, plus the plumbing to capture the mouseup in the outer document, post a message to the inner one, and call triggerMouseEvent: Demo2

    在尝试创建最少的示例时，我发现也许以某种方式涉及了盒模型. Demo1a 与demo1相同除了iframe元素的高度为710px而不是700px之外，其他内容均与上述相同. 在我的测试计算机上，这消除了该错误.在我同事的测试机上，该错误仍然存​​在.

    While trying to create the minimal examples, I discovered that maybe the box model is involved somehow. Demo1a is identical to demo1 above, except that the iframe element has a height of 710px instead of 700px. On my test machines this eliminates the bug. On my colleague's test machine, the bug remains.

    • 269917 mousedown上的preventDefault阻止对iframe中的鼠标事件进行正确处理
    • 2013年8月8日开业；最新评论2018年6月18日
    • 之所以提及它是因为它涉及iframe外部的mouseup.如上所述，即使根本没有使用JavaScript，我们的问题也会发生.

    我已经提交了铬问题#882491 .它尚未看到任何实际活动.

    I have submitted Chromium issue #882491. It has not yet seen any real activity.

    推荐答案

    此错误已在Chrome 70中修复，Chrome 70已宣布将于2018年10月16日发布.我已经在Beta通道中对Chrome 70进行了测试，确认它确实是固定的.

    This bug is already fixed in Chrome 70, which has been announced to release October 16, 2018. I have already tested with Chrome 70 in the beta channel and I confirm that it was indeed fixed.

    这篇关于离开iframe时Mouseup丢失:导致输入反向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！