javascript - document won't fire mousemove event if mousedown occurred in iframe - Stack Overflow

admin管理员组

文章数量:1410724

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.

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.

• javascript
• jquery
• events
• iframe
• mousemove

Share Improve this question Follow edited May 26, 2013 at 0:10 user706474 asked May 25, 2013 at 18:25 user706474user706474 6311 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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 plete 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.

using object literal notation you can add multiple events to the .on(). then i added the .contents() to get all of your events to work within an Iframe. here's a working fiddle

$('.myiframe').contents().on({
    mousedown: function () {
        console.log('mouse down triggered');
    },
    mouseup: function () {
        console.log('mouse up triggered');
    },
    mousemove: function() {
        console.log('mouse move triggered');
    }
});

When u call the above code from a page, it takes some time to load the frame body. Hence it cannot attach the frame mousemove event listener. If you call it with settimeout function it will be able to get the content of frame and movemove will get attched to body of frame.

:)

本文标签： javascriptdocument won39t fire mousemove event if mousedown occurred in iframeStack Overflow