5

我有一个相同的来源 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);
});

我的问题是如果 mousedown 发生在 iframe 中并且鼠标离开 iframe，文档不会触发它自己的 mousemove 事件，直到 mouseup 发生。

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

4

3 回答 3

2

这是在具有多个 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 中却没有。

于 2014-03-22T15:11:40.840 回答
0

使用对象文字表示法，您可以将多个事件添加到 .on()。然后我添加了 .contents() 以使您的所有事件都在 iframe 中工作。这是一个工作小提琴

$('.myiframe').contents().on({
    mousedown: function () {
        console.log('mouse down triggered');
    },
    mouseup: function () {
        console.log('mouse up triggered');
    },
    mousemove: function() {
        console.log('mouse move triggered');
    }
});
于 2013-05-25T22:12:59.033 回答
-1

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

:)

于 2016-06-23T13:58:47.557 回答