jQuery UI可排序--如何取消拖动/排序的项目上的单击事件？
jQuery UI可排序--如何取消拖动/排序的项目上的单击事件？
提问于 2009-06-03 20:56:13
我有一个jQuery UI Sortable列表。可排序项目还附加了一个单击事件。有没有一种方法可以防止在我拖动一个项目后触发click事件？
$().ready( function () {
$('#my_sortable').sortable({
update: function() { console.log('update') },
delay: 30
});
$('#my_sortable li').click(function () {
console.log('click');
});
});#my_sortable li {
border: 1px solid black;
display: block;
width: 100px;
height: 100px;
background-color: gray;
}<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<ul id="my_sortable">
<li id="item_1">A</li>
<li id="item_2">B</li>
<li id="item_3">C</li>
</ul>
回答 9
Stack Overflow用户
回答已采纳
发布于 2010-06-05 05:26:59
我也有同样的问题，因为我的可排序项目包含三到四个可点击的项目(数量是可变的)，动态绑定/取消绑定它们似乎不是一个真正的选择。但是，由于意外，我指定了
helper : 'clone'选项，它在界面方面与原始的可排序对象行为相同，但显然不会在被拖动的项上触发单击事件，从而解决了问题。和其他东西一样，这也是一种技巧，但至少它是简短和简单的。
Stack Overflow用户
发布于 2009-06-03 21:57:29
如果您的li具有对click事件的引用，则可以在可排序的update方法中取消绑定它，然后使用Event/one重新绑定它。可以在重新绑定之前停止事件传播，从而防止触发原始的单击处理程序。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
var myClick = function () {
console.log('click');
};
$().ready( function () {
$('#my_sortable').sortable({
update: function(event, ui) {
ui.item.unbind("click");
ui.item.one("click", function (event) {
console.log("one-time-click");
event.stopImmediatePropagation();
$(this).click(myClick);
});
console.log('update') },
delay: 30
});
$('#my_sortable li').click(myClick);
});
</script>
<style type="text/css" media="screen">
#my_sortable li {
border: 1px solid black;
display: block;
width: 100px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<ul id="my_sortable">
<li id="item_1">A</li>
<li id="item_2">B</li>
<li id="item_3">C</li>
</ul>
</body>
</html>Stack Overflow用户
发布于 2015-11-17 22:35:02
如果您出于某种原因不想使用helper:'clone'技巧，这个技巧对我很有效。它取消拖动的项上的单击事件。jQuery会将类ui-sortable-helper添加到拖动的元素中。
$('.draggable').click(clickCancelonDrop);
function clickCancelonDrop(event) {
var cls = $(this).attr('class');
if (cls.match('ui-sortable-helper'))
return event.stopImmediatePropagation() || false;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/947195
复制相关文章
相似问题