我有一个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>
发布于 2010-06-05 05:26:59
我也有同样的问题,因为我的可排序项目包含三到四个可点击的项目(数量是可变的),动态绑定/取消绑定它们似乎不是一个真正的选择。但是,由于意外,我指定了
helper : 'clone'
选项,它在界面方面与原始的可排序对象行为相同,但显然不会在被拖动的项上触发单击事件,从而解决了问题。和其他东西一样,这也是一种技巧,但至少它是简短和简单的。
发布于 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>
发布于 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;
}
https://stackoverflow.com/questions/947195
复制相似问题