如果iframe中發生mousedown，文檔將不會觸發mousemove事件

Question

我的iframe起源相同。在iframe鼠標事件觸發的文件中像這樣：

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

我的問題是，如果在iframe發生鼠標按下和鼠標離開的iframe，該文件將不會觸發它自己的鼠標移動事件，直到鼠標鬆開發生。

我試過在iframe和文檔中觸發mouseup，一旦鼠標離開iframe，但文檔mousemove事件將不會恢復，直到物理mouseup發生。

Answer 1

使用對象字面符號可以將多個事件添加到.on（）。然後我添加了.contents（）來讓所有的事件在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'); 
    } 
}); 

Answer 2

這是爲我工作的一個頁面，有多個iframe上：

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

    }); 
}); 

這將只有一個iframe的工作了。重要的部分是在綁定事件之前等待幀加載完成，否則可能無法正常工作。在我的情況下，鼠標事件在一個iframe中正確檢測到，但在另一個iframe中檢測不到。

Answer 3

當你從頁面調用上述代碼時，加載框架體需要一些時間。因此它不能附加框架mousemove事件偵聽器。如果你用settimeout函數調用它，它將能夠獲得幀的內容，並且movemove將獲得幀的主體。

:)