Pat*_*ney 66 javascript jquery jquery-ui
我有一个jQuery UI可排序列表.可排序项目还附加了单击事件.拖动项目后,有没有办法防止点击事件被触发？
$().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> Elt*_*kes 137
我有同样的问题,因为我的可排序项目包含三个或四个可点击的项目(并且数字是可变的)绑定/取消绑定他们在飞行中似乎不是一个选项.但是,事件我指定了
helper : 'clone'
选项,在界面方面与原始可排序的行为相同,但显然不会触发拖动项目上的点击事件,从而解决了问题.它和其他任何东西一样多,但至少它简单易行.
And*_*ion 13
如果您对li的click事件有引用,则可以在可排序更新方法中取消绑定,然后使用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>
| 归档时间： |
|
| 查看次数： |
30458 次 |
| 最近记录： |