iframe中可拖动的jquery不会点击

Question

我在 iframe 中从它的父级创建了一个可拖动对象，我想在单击可拖动对象时附加一个事件。

draggable 单独工作，所有点击功能单独工作，但是一旦将两者混合在一起，左键点击事件就会停止工作。如果我删除 iframe 并将可拖动和单击绑定放在单独的页面中，它可以正常工作。

parent.html

<iframe id="siteframe" src="http://jsfiddle.net/kyT6N/show/light/">

parent.js

$('#siteframe').load(function () {

    $('#siteframe').contents().find('.draggable').draggable({ delay:200, iframeFix: true});

    $('#siteframe').contents().find('.draggable').bind('mouseup',function() {
        alert('mouse up');
    });  

    $('#siteframe').contents().find('.draggable').click(function() {
        alert('click');
    });
    $('#siteframe').contents().find('.draggable').on('click', function() {
        alert('click');
    });

});

iframe.html

<div class="draggable">draggable</div>

JSFiddle 代码： http://jsfiddle.net/A5T3Q/

JSFiddle 演示： http://jsfiddle.net/A5T3Q/show/light/

编辑：

经过进一步调查，似乎是 iframeFix: true 选项与点击功能混淆，我猜这是因为它覆盖了 iframe？对此有什么可以做的吗？

Answer 1

我认为是在mousedown事件发生后jquery ui create iframeFix mask太快的问题，但延迟仅用于mousestart控制。所以这可以通过添加一个函数 _iframeFix 来优化。

_iframeFix: function(event){
    //patch for iframe
    var o=this.options;
    if(o.iframeFix === true){
        $("div.ui-draggable-iframeFix").each(function() {
            this.parentNode.removeChild(this);
        });
    }

    $(o.iframeFix === true ? "iframe" : o.iframeFix).each(function() {
        $('<div class="ui-draggable-iframeFix" style="background: #fff;"></div>')
        .css({
            width: this.offsetWidth+"px", height: this.offsetHeight+"px",
            position: "absolute", opacity: "0.001", zIndex: 1000
        })
        .css($(this).offset())
        .appendTo("body");
    });
}

删除_mouseCapture函数中的iframe掩码代码，并在延迟后创建iframe掩码。 此外，您应该为 iframe 中的拖动元素添加 mouseup 事件句柄以结束超时控制

    if(o.iframeFix&&o.delay){
       that.element
            .bind('mouseup.'+this.widgetName, this._mouseUpDelegate);
    }

最后在_mouseup函数中，清除mouseup句柄，清除超时

_mouseUp: function(event) {
    $(document)
        .unbind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
        .unbind('mouseup.'+this.widgetName, this._mouseUpDelegate);

    var o=this.options;
    if(o.iframeFix&&o.delay){
       mouseHandled = false;
       this.element
            .unbind('mouseup.'+this.widgetName, this._mouseUpDelegate);
    }
    if(this._mouseDelayTimer) clearTimeout(this._mouseDelayTimer);

    if (this._mouseStarted) {
        this._mouseStarted = false;

        if (event.target === this._mouseDownEvent.target) {
            $.data(event.target, this.widgetName + '.preventClickEvent', true);
        }

        this._mouseStop(event);
    }

    return false;
},

Answer 2

您的代码是正确的，但是您正在从不同的 URL 加载 iframe。 如果父域和 iframe url 域不同，则 javascript 不允许您访问 iframe 元素。