Question

这有点难以解释，所以我在这里设置了一个简化的测试用例：http://jsfiddle.net/5Z6h6/1/。基本上正在发生的事情是我将jQuery UI的.draggable传递给iFrame的内容，并使用jQuery UI的内置iframeFix来避免iFrame捕获鼠标事件的问题。

这种方法效果很好，除了在Firefox中，点击和拖动似乎不再起作用;相反，你必须单击，释放，然后拖动，然后再次单击放置。这是预期的行为吗？有办法解决这个问题吗？

非常感谢任何帮助。

Answer 1

升级您的Firefox版本并再次检查。

Answer 2

神奇的是在mousedown的开头点击iframe：

$iframe.css('display', 'none');

然后设置可拖动和触发事件：

$draggable.trigger(event);

然后再次显示iframe：

$iframe.css('display', 'block');

该功能应该运行得足够快，所以你不应该看到任何闪烁 - 带我试用和找错，但这解决了我在Firefox中的iframe问题。

Answer 3

这花了我很长时间才弄明白，这里发布的解决方案不起作用，它似乎仍然是jQuery中的一个问题。

问题是在Firefox中，似乎mousedown，mouseup和mousemove事件不会从iframe冒泡到父文档。

我使用的解决方法是：

// From parent document
// Get iframe 'document'
var $iframe = $('iframe').$el.content();

// Then bind listeners for events, and trigger them on parent document
$iframe.on({
    mousemove: function(e){
        $(document).trigger(e);
    },
    mousedown: function (e) {
        $(document).trigger(e);
    },
    mouseup: function (e) {
        $(document).trigger(e);
    }
});

希望这能节省一些时间。

在Firefox中单击并拖动不能使用jQuery UI iframeFix

3 个答案: