document won't fire mousemove event if mousedown occurred in iframe

Question

I have a same origin iframe. Mouse events in the iframe are triggered in the document like so:

// this won't work
$('iframe').contents().find('body').on('mousedown mouseup mousemove', function(e) {
  $(document).trigger(e);
});

// this does work
$('iframe').contents().on('mousedown mouseup mousemove', function(e) {
  $(document).trigger(e);
});

My problem is if the mousedown occurs in the iframe and the mouse leaves the iframe, the document won't trigger it's own mousemove events until a mouseup occurs.

I've tried triggering mouseup in both the iframe and the document once the mouse leaves the iframe, but the document mousemove events won't resume until a physical mouseup occurs.

Answer 1

This is what worked for me on a page that had multiple iFrames:

$(function() {
    $('iframe').each(function(index) {
        $(this).load(function () {
            $(this).contents().on("mousedown", function (e) {
                $(document).trigger(e);
            })
            .on("mouseup", function (e) {
                $(document).trigger(e);
            });
        });

    });
});

It would work with only one iframe too. The important part is to wait for the frame load to complete before binding events, otherwise it may not work properly. In my case, the mouse events were detected properly in one iframe, but not in the other.