使用jQuery拖放防止单击事件

Question

我在页面上有可用jQuery拖动的元素.这些元素是否具有导航到另一页面的点击事件(例如普通链接).

什么是防止点击触发放弃这样的元素同时允许点击它的最佳方法是不是拖放状态？

我有可排序元素的这个问题,但认为有一个普通拖放的解决方案是好的.

我已经为自己解决了这个问题.在那之后我发现Scriptaculous存在相同的解决方案,但也许有人有更好的方法来实现它.

Answer 1

一个适合我的解决方案,并且不需要超时:(是的,我有点迂腐;-)

我在拖动开始时向元素添加了一个标记类,例如'noclick'.当元素被删除时,触发click事件 - 更准确地说,如果拖动结束,实际上它不必被拖放到有效目标上.在单击处理程序中,我删除标记类(如果存在),否则单击处理正常.

$('your selector').draggable({
    start: function(event, ui) {
        $(this).addClass('noclick');
    }
});

$('your selector').click(function(event) {
    if ($(this).hasClass('noclick')) {
        $(this).removeClass('noclick');
    }
    else {
        // actual click event code
    }
});

Answer 2

解决方案是添加单击处理程序,以防止点击在拖动开始时传播.然后在执行drop之后删除该处理程序.最后一个操作应该延迟一点,以防止点击工作.

可排序解决方案:

...
.sortable({
...
        start: function(event, ui) {
            ui.item.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.item.unbind("click.prevent");}, 300);
        }
...
})

可拖动的解决方案:

...
.draggable({
...
        start: function(event, ui) {
            ui.helper.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
        }
...
})

Answer 3

我有同样的问题,尝试了多种方法,没有一个对我有用.

解决方案1

$('.item').click(function(e)
{            
    if ( $(this).is('.ui-draggable-dragging') ) return false;
});  

对我没什么用.拖动完成后,单击该项目.

解决方案2(汤姆·德波尔)

$('.item').draggable(
{   
    stop: function(event, ui) 
    {
         $( event.originalEvent.target).one('click', function(e){ e.stopImmediatePropagation(); } );
    }
});

这种方法很好但在一种情况下失败 - 当我全屏显示时:

var body = $('body')[0];     
req = body.requestFullScreen || body.webkitRequestFullScreen || body.mozRequestFullScreen;
req.call(body); 

解决方案3(Sasha Yanovets撰写)

 $('.item').draggable({
        start: function(event, ui) {
            ui.helper.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
        }
})

这对我不起作用.

解决方案4-唯一一个工作得很好的人

$('.item').draggable(
{   
});
$('.item').click(function(e)
{  
});

是的,就是这样 - 正确的顺序就是诀窍 - 首先你需要绑定draggable()然后click()事件.即使我在click()事件中放入全屏切换代码,拖动时仍然没有进入全屏模式.适合我!

Answer 4

我想补充一点,似乎阻止click事件只有在可拖动或可排序事件之后定义click事件时才有效.如果首先添加单击,则会在拖动时激活它.

Answer 5

我发现使用标准的jQuery点击功能:

$("#element").click(function(mouseEvent){ // click event });

在jQuery UI中运行得很好.拖放时不会执行click事件.:)

Answer 6

我真的不喜欢使用计时器或预防,所以我做的是这样的:

var el, dragged

el = $( '#some_element' );

el.on( 'mousedown', onMouseDown );
el.on( 'mouseup', onMouseUp );
el.draggable( { start: onStartDrag } );

onMouseDown = function( ) {
  dragged = false;
}

onMouseUp = function( ) {
  if( !dragged ) {
    console.log('no drag, normal click')
  }
}

onStartDrag = function( ) {
  dragged = true;
}

Rocksolid ..