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中发生了mousedown并且鼠标离开iframe，则文档将不会触发它自己的mousemove事件，直到发生mouseup。

一旦鼠标离开iframe，我就尝试在iframe和文档中触发mouseup，但是文件mousemove事件将不会恢复，直到发生物理鼠标。

Answer 1

在具有多个iFrame的网页上，这对我有用：

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

    });
});

它也只适用于一个iframe。重要的是在绑定事件之前等待帧加载完成，否则它可能无法正常工作。在我的例子中，鼠标事件在一个iframe中被正确检测到，但在另一个iframe中没有被检测到。

Answer 2

使用对象文字表示法，您可以向.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 3

当你从页面调用上面的代码时，加载框架体需要一些时间。因此它无法附加框架mousemove事件监听器。如果你用settimeout函数调用它，它将能够获得帧的内容，movemove将被附加到帧的主体。

：）

如果在iframe中发生了mousedown，则文档不会触发mousemove事件

3 个答案: