jquery-ui - 带有单击处理程序的嵌入式 div 的 jQuery 可拖动 div。如何阻止点击处理程序触发

Question

我有以下一点 jquery:

http://jsfiddle.net/tad604/Ck2qk/10/

当您单击并拖动时，我希望 foo div 的单击处理程序不会触发。我尝试在拖动的停止/启动事件(event.stopPropagation() 等)中做各种事情，但都无济于事。无论如何，在拖动事件之后都会触发单击处理程序。

Answer 1

这很烦人，但唯一的解决方法是在拖动开始时删除事件并将其放回拖动停止。试试这个:

$(".foo").click(function(){
    alert("blah");
});
$(".bar").draggable({
    stop: function(event) { setTimeout(function() {
        $(".foo").click(function(){
            alert("blah");
        }); }, 100)},
    start: function(event) { $('.foo').unbind('click'); }                
});

现在仍然存在一个问题，您的点击事件可能比这更复杂一些，您可能不想重写它们。您可以使用 jquery 数据保存事件以供以后使用，如下所示:

var events = $('#test').data("events");

或者，您可以使用 jquery live 函数附加单击事件，以便该事件只会绑定(bind)到与该选择器匹配的元素。这意味着如果您在拖动时更改类，使其不再匹配该选择器，它将不再具有该单击事件。像这样的东西可能会起作用:

$(".bar .foo").live('click', function(){
    alert("blah");
});
$(".bar").draggable({
    stop: function(event) { setTimeout(function() {
    $(".draggableBar").removeClass('draggableBar').addClass('bar');
    }, 100)},
    start: function(event) { $(this).removeClass('bar').addClass('draggableBar'); }                
});

您还必须更新 css 以便可拖动栏获得与栏相同的样式。