Question

我已经在iframe的父级iframe中创建了一个draggable，我想在点击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

我认为问题是jquery ui在mousedown事件发生后立即创建iframeFix掩码太快，但延迟仅用于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中的drag元素添加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

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

iframe中的jquery draggable赢了点击

2 个答案: