Mousemove doesn't dispatch after mousedown over an iframe

NEW
Unassigned

Status

()

Core
Event Handling
7 years ago
6 years ago

People

(Reporter: Daniel, Unassigned)

Tracking

({dom2, regression, testcase})

Trunk
x86
Windows 7
dom2, regression, testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

7 years ago
User-Agent:       Mozilla/5.0 (Windows NT 6.1; rv:2.0b8) Gecko/20100101 Firefox/4.0b8
Build Identifier: Mozilla/5.0 (Windows NT 6.1; rv:2.0b8) Gecko/20100101 Firefox/4.0b8

The event mousemove is not dispatch when mousedown has been triggered over an iframe, and the mouse is still down.

This works in Firefox 3.6 and earlier.

In a drag and drop emulation, an "overlay" div (which covers the whole window) is used to trigger on "mousemove". But when the "dragstart" event (represented by mousedown) starts over an iframe, the overlay div doesn't receive any event.


Reproducible: Always

Steps to Reproduce:
1. Use this code:

<html>
  <head>
    <style>
    * {
      -moz-user-select: none;
    }
    </style>
    <script>
      function showOverlay() {
        var overlay = document.getElementById("overlay");
        overlay.style.display = "block";
      }
      function hideOverlay() {
        var overlay = document.getElementById("overlay");
        overlay.style.display = "none";
      }
      
      function Test() {
        var oThis = this;
        oThis.startMoving = function(evt) {
          test_startMoving.apply(oThis, new Array(evt));
        }
        oThis.Moving = function(evt) {
          test_Moving.apply(oThis, new Array(evt));
        }
        oThis.stopMoving = function(evt) {
          test_stopMoving.apply(oThis, new Array(evt));
        }
      }
      function test_startMoving(evt) {
        var overlay = document.getElementById("overlay");
        showOverlay();
        overlay.focus();
        overlay.addEventListener("mousemove", this.Moving, false);
        overlay.addEventListener("mouseup", this.stopMoving, false);
        evt.preventDefault();
        evt.stopPropagation();
      }
      function test_Moving(evt) {
        var MoveObject = document.getElementById("MoveObject");
        MoveObject.style.left = evt.clientX - 50;
        MoveObject.style.top = evt.clientY - 50;
        MoveObject.style.display = "block";
      }
      function test_stopMoving(evt) {
        var overlay = document.getElementById("overlay");
        hideOverlay();
        overlay.removeEventListener("mousemove", this.Moving, false);
        overlay.removeEventListener("mouseup", this.stopMoving, false);
      }
      
    </script>
  </head>
  <body>
    <div id="MoveObject" style="position:absolute;width:100px;height:100px;left:50%;top:50%;background-color:yellow;z-index:0;">
      <div>Moving Object</div>
    </div>
    <div id="overlay" style="width:100%;height:100%;position:absolute;top:0px;left:0px;background-color:#ffcccc;opacity:0.5;display:none;z-index:10;"></div>
    <iframe  id="win" name="win" style="position:absolute;width:400px;height:400px;">
    </iframe>
    <script>
      // FF3.5 b4 works FF3.6 works, FF4b6 fail
      var content ="<div STYLE='position:absolute;top:10;left:10;height:380px;width:380px;background-color:#00ff00;opacity:0.5'>Iframe Click here to drag 'Moving Object'</div>";
      var win = window["win"];
      var test = new Test();
      var ifrm = document.getElementById('win');
      ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
      ifrm.document.open();
      ifrm.document.write(content);
      ifrm.document.close();
      win.document.body.addEventListener("mousedown", test.startMoving, false);
    </script>
  </body>
</html>

2. Mousedown on the green iframe and move the mouse around, without letting go of the button.
3.
Actual Results:  
The yellow div doesn't move.

Expected Results:  
The yellow div should move with the mouse.

This works in Firefox 3.6 and earlier versions.
(Reporter)

Comment 1

7 years ago
Created attachment 503435 [details]
Same testcase as in the link.
(Reporter)

Updated

7 years ago
Keywords: dom2
Whiteboard: Mousemove doesn't dispatch after mousedown over an iframe
Repro'd with Mozilla/5.0 (Windows NT 5.1; rv:2.0b10pre) Gecko/20110113 Firefox/4.0b10pre ID:20110113030355.
Component: General → DOM
Keywords: regression, regressionwindow-wanted, testcase
Product: Firefox → Core
QA Contact: general → general
Summary: http://fimbul.com/xc/ff4_iframeEventDispatch.html → Mousemove doesn't dispatch after mousedown over an iframe
Whiteboard: Mousemove doesn't dispatch after mousedown over an iframe
Version: unspecified → Trunk
Status: UNCONFIRMED → NEW
Ever confirmed: true
Isn't this just because of mouse capture?
Last good nightly: 2010-10-28 First bad nightly: 2010-10-29

Pushlog: http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=fe4898e97431&tochange=799a83ba5f86
=> candidate: Bug 606192
Component: DOM → Event Handling
Keywords: regressionwindow-wanted
QA Contact: general → events

Comment 5

7 years ago
Bah, it is tricky to get mouse event handling to work the same way it worked 
before bug 130078, partly because it isn't standardized at all.
(Reporter)

Comment 6

7 years ago
This bug turned out to be a blocker for us now that Firefox 4 has been released.

Any chance some poor soul would give it a try? :)

Comment 7

6 years ago
How about a workaround?

I have an odd one:
While holding down the mouse button, I then alt-tab to another app and then alt-tab back (remember to keep holding mouse button down throughout) then the mousemove events start firing okay.

Is there a way to force this? I can't ask users to alt-tab away and then back.

Another workaround is to remove "preventDefault()" which fixes mousemove, but the text selection is now messing up the look of the drag and drop. Is there a way to just turn off selection without using preventDefault?

It seems like preventDefault() became broken in FF4 build 7 ... and now through FF9.

Comment 8

6 years ago
I meant beta 7, not build 7.
preventDefault() is broken in more than just the specific case of this bug? If so please file a new bug for that.

Comment 10

6 years ago
This bug describes my problem very well. I am trying to figure out a workaround. 

Daniel wrote in his test code "FF3.5 b4 works FF3.6 works, FF4b6 fail," but maybe he had a typo because the problem first appears in FF4b7.

Since FF4b7, "preventDefault" appears to have this bad side-effect.

Comment 11

6 years ago
Hi, I need to retract my last comments on workarounds. Also, my comments about "preventDefault" should be ignored too. My issue seems to be different than Daniel's. But the same code changes to Firefox might have caused both our issues.

For my issue, the new methods in FF4 for setCapture caused my app to break because my custom methods setCapture methods were no longer called. The same thing happened to Jeff:
https://bugzilla.mozilla.org/show_bug.cgi?id=503943#c51
I have renamed my methods to something like setMyCapture and all seems to work fine now.

For Daniel, the same code to fix defect 503943 might cause his issue since that defect mentions beta 6 like Daniel wrote too.
https://bugzilla.mozilla.org/show_bug.cgi?id=503943#c46
Daniel, check out 603550 which is derived from that comment # 46 in 503943:
https://bugzilla.mozilla.org/show_bug.cgi?id=603550
You need to log in before you can comment on or make changes to this bug.