CODEWITHSUNDEEP
javascriptjqueryeventsiframemousemove
user706474
user706474

Reputation: 63

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

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.

Upvotes: 6

Views: 6955

Answers (3)

Jean-François Beauchamp
Jean-François Beauchamp

Reputation: 5615

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.

Upvotes: 2

user6504601
user6504601

Reputation: 1

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.

:)

Upvotes: -1

Widner Millon
Widner Millon

Reputation: 36

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');
    }
});

Upvotes: 1

Related Questions