在使用可点击内容拖动gridster.js小部件后，如何避免单击事件触发？
我正在使用Gridster（ http://gridster.net/ ），它可以拖动li的内容。 我的li有一个可点击的div。
content
所以这里是我面临的问题，当我停止并释放拖动时，它将调用div中的单击，我如何只是拖动div，而不是在拖动停止和释放后调用单击。 我不希望它在拖动后重定向到另一个页面（用户拖动和释放..因为当拖动时，它需要单击div，同时，div可以被点击，所以当停止并释放拖动时，它将调用点击）
$(function(){ //DOM Ready var gridster = $(".gridster ul").gridster( { widget_margins: [5, 5], widget_base_dimensions: [128, 130], max_size_y: 2, max_size_x: 2, extra_cols: 6 } ).data('gridster'); //which i tried but failed gridster.draggable.stop(){ onclick = "false"; } // gridster.resize_widget($('.gridster li').eq(0), 1,1); });
或任何人都可以提供有关如何调用或使用gridster提供的function的提示
draggable.stop：function（event，ui）{}拖动停止时的回调。
我想这里会有一些实现。
最初的解决方案，但仍然没有工作
var gridster ,draggable ; $(function () { gridster = $(".gridster > ul").find("> li ").click(function(e){ !draggable && alert(1) //ipad2 ，not show alert draggable=0; alert(draggable); }).end() .gridster({widget_margins: [5, 5], widget_base_dimensions: [128, 130],min_cols: 10,min_rows: 20 ,serialize_params: function($w, wgd) { return { id: wgd.el[0].id //,col: wgd.col //,row: wgd.row }; } ,draggable: { start:function(event, ui){ // alert("hekio);"); draggable=1; } } }).data('gridster'); //gridster.disable(); // gridster.resize_widget($('.gridster li').eq(0), 1,1); if(!dragged){ $("a#blue.grid").click(function(){ window.location = '../yokotachi/category_list.php?category=yokosmart'; }); } // RESET DRAGGED SINCE CLICK EVENT IS FIRED AFTER drag stop dragged = 0 });
我用触发变量修复它：var dragged = 0将以下内容添加到你的gridster初始化，它在拖动开始时将变量设置为1：
... draggable: { start: function(event, ui) { dragged = 1; // DO SEOMETHING } } ....
在同一对象的click事件中，检查：
... if(!dragged){ // DO SOMETHING } // RESET DRAGGED SINCE CLICK EVENT IS FIRED AFTER drag stop dragged = 0 ....
问题是在传递给draggable.stop的mouseup事件之后触发click事件。
因此，您需要暂时捕获单击事件并停止传播，然后在完成后将其取消，以便人们随后可以单击该项目。
你可以这样做（ 点击工作JSFiddle ）：
$(document).ready(function () { // Basic event handler to prevent event propagation and clicks var preventClick = function (e) { e.stopPropagation(); e.preventDefault(); }; $(element).gridster({ draggable: { start: function (event, ui) { // Stop event from propagating down the tree on the capture phase ui.$player[0].addEventListener('click', preventClick, true); }, stop: function (event, ui) { var player = ui.$player; setTimeout(function () { player[0].removeEventListener('click', preventClick, true); }); } } }); })
这是一个比当前接受的答案更好的解决方案，因为它避免了在多个组件/处理程序中设置/检查状态的变量。
你应该尝试：
var gridster = $(".gridster ul").gridster().data('gridster'); gridster.disable();
没有深入研究JS，添加onclick = "return false;" 到你的标签应该停止点击触发。
要停止拖动，请尝试：
gridster.draggable.stop(){ return false; }
要么
gridster.draggable.stop(e){ e.preventDefault(); }
现在有一个原生支持来禁用Gridster上的拖放操作。
$(".gridster ul").gridster().data('gridster').disable();