user706474 user706474 - 5 months ago 40
Javascript Question

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.

Answer

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