使用jQuery拖放防止单击事件
使用jQuery拖放防止单击事件
提问于 2009-11-21 00:25:11
我在页面上有元素，可以用jQuery拖拽。这些元素是否有导航到另一个页面(例如普通链接)的单击事件。
什么是最好的方法来防止点击触发拖放这样的元素，同时允许点击它不是拖拽和拖放状态？
我对可排序元素有这个问题，但我认为有一个通用拖放的解决方案是很好的。
我自己解决了这个问题。在那之后，我找到了同样的解决方案exists for Scriptaculous，但也许有人有更好的方法来实现它。
回答 14
Stack Overflow用户
回答已采纳
发布于 2009-11-21 00:26:36
解决方案是添加单击处理程序，以防止单击在拖动开始时传播。然后在执行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的解决方案：
...
.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);
}
...
})Stack Overflow用户
发布于 2010-03-27 03:16:30
一个对我很有效并且不需要超时的解决方案：(是的，我有点书呆子;-)
当拖动开始时，我给元素添加了一个标记类，例如'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
}
});Stack Overflow用户
发布于 2010-03-15 21:34:50
我想补充的是，似乎只有在可拖动或可排序事件之后定义单击事件时，才能阻止单击事件。如果先添加单击，它将在拖动时激活。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1771627
复制相关文章
相似问题