onclick 属性与 jqueryui 拖放冲突答案

【问题标题】：Onclick property conflict with jqueryui drag and droponclick 属性与 jqueryui 拖放冲突
【发布时间】：2014-06-18 04:30:45
【问题描述】：

我有一个带有两个操作的 html 控件： 1-它有一个 Onclick 功能，当 Onclick 发生时，一个 asp.net 回发触发器和一个用于编辑的模式框打开。 2-当我使用 jquery ui Drag and Drop 将它从一个 html 容器拖到另一个容器时，我希望不会发生 onclick 并且只拖放到另一个容器。

我该怎么做？当我想单击拖动我的控件时，调用 onclick 函数:(

这是我的 html 控件：

<div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end event-blue ui-draggable" onclick="CallPostBack('2|NoDate|4');" style="position: relative;"><div class="fc-event-inner"><span class="fc-event-title">aaa</span></div></div>

这是我的 CallPostBack Javascript 函数：

function CallPostBack(eventArguments) {
    __doPostBack('<%=ctl1.UniqueID %>', eventArguments);
}

这是我的拖动和移动功能：

  function setMovableEvents() {
    //alert('drag');

    return $(".fc-event").each(function () {
        return $(this).draggable({
            zIndex: 999,
            revert: false,

        });
    });
}

【问题讨论】：

对于您的第一次操作，哪个事件触发了点击操作？点击还是提交？
@Hughan ：我认为 Onclick 触发器，我设置了 onclick="CallPostBack('2|NoDate|4');"为此...

标签： javascript jquery asp.net jquery-ui onclick

【解决方案1】：

我建议您使用 mouseup 而不是在 jquery 中单击：

$('.fc-event').mouseup(function(){
    ...
});

【讨论】：

【解决方案2】：

我终于可以通过改变我的可移动功能来解决我的问题了：

  function setMovableEvents() {
    //alert('drag');

    return $(".fc-event").each(function () {
        return $(this).draggable({
            zIndex: 999,
            revert: false,
            start: function (event, ui) {
                Moving = true;
                $(this).css('z-index', 100000);
                $(this).prop('onclick', '');
            },
            stop: function () {
                Moving = false;
            }
        });
    });
}

现在当拖动发生时，我清除 Onclick 以防止点击 onclick javascript 函数。

【讨论】：