user706474 user706474 - 2 years ago 185
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) {

// this does work
$('iframe').contents().on('mousedown mouseup mousemove', function(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 Source

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

    mousedown: function () {
        console.log('mouse down triggered');
    mouseup: function () {
        console.log('mouse up triggered');
    mousemove: function() {
        console.log('mouse move triggered');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download