jQuery UI可sorting – 如何取消拖放/sorting项目上的点击事件？
我有一个jQuery UIsorting列表。 可sorting的项目也会附加一个点击事件。 我有一种方法来防止点击事件发射后，我拖动一个项目？
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <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"> $().ready( function () { $('#my_sortable').sortable({ update: function() { console.log('update') }, delay: 30 }); $('#my_sortable li').click(function () { console.log('click'); }); }); </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> 我有同样的问题，因为我的可sorting项目包含三个或四个可点击的项目（和数量是可变的）绑定/解除绑定它们似乎并不是一个真正的select。 但是，事件我指定了
helper : 'clone'
选项，其行为与原始的可sorting界面相同，但显然不会触发拖动项目上的点击事件，从而解决问题。 这与其他任何东西一样，但至less它简单易用。
如果你有一个对你的li的click事件的引用，你可以在可sorting的更新方法中解除绑定，然后使用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>
$('.selector').draggable({ stop: function(event, ui) { // event.toElement is the element that was responsible // for triggering this event. The handle, in case of a draggable. $( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } ); } });
这是因为“一个听众”是在 “正常”的听众之前被解雇的。 所以如果一个监听器停止传播，它将永远不会到达你以前设置的监听器。
如果你由于某种原因不想使用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; }
mercilor的答案为我提供了一些警告。 点击事件实际上是在句柄元素上，而不是sorting的项目本身。 不幸的是，UI对象，不给你一个引用更新事件中的句柄（function请求jquery ui？）。 所以我必须自己去处理。 另外，我还必须调用preventDefault以停止点击操作。
update: function(ev, ui) { var handle = $(ui.item).find('h3'); handle.unbind("click"); handle.one("click", function (event) { event.stopImmediatePropagation(); event.preventDefault(); $(this).click(clickHandler); }); // other update code ...
更容易，使用var知道什么时候元素正在sorting…
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <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"> $().ready( function () { $('#my_sortable').sortable({ start: function() { sorting = true; }, update: function() { console.log('update'); sorting = false; }, delay: 30 }); $('#my_sortable li').click(function () { if (typeof(sorting) == "undefined" || !sorting) { console.log('click'); } }); }); </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>
一个解决scheme是使用live（）而不是正常的绑定，但Elte Hupkes解决scheme！
我们还可以在停止事件上使用一个标志，并在点击事件中检查该标志。
var isSortableCalled = false; $('#my_sortable').sortable({ stop: function(event, ui){ isSortableCalled = true; }, update: function() { console.log('update') }, delay: 30 }); $('#my_sortable li').click(function () { if(!isSortableCalled){ console.log('click'); } isSortableCalled = false; });
感谢Elte Hupkus ;
helper: 'clone'
我已经实现了相同的样本如下所示。
$(document).ready(function() { $("#MenuListStyle").sortable({ helper:'clone', revert:true }).disableSelection(); });
$('.menu_group tbody a').click(function(){ link = $(this).attr('href'); window.location.href = link; });
这个解决scheme似乎正在为我工作。 现在我可以点击可sorting元素内的可点击。
注意： ".menu_group tbody"是.sortable();
