jquery ui拖动事件取消点击事件

Question

好的，我有这些可拖动元素，它们也有单击事件处理程序。问题是，当我拖动元素时，单击事件会触发(并处理)，但我想要的是仅在没有拖动时才处理单击，因此当拖动元素时，取消点击事件处理。

这是一个演示 fiddle :http://jsfiddle.net/wsTY5/

$('div.map').draggable(options);

Answer 1

你可以用这样的东西来完成它:

var clicked = true;
var options = {
    containment: '.map-containment',
    cursor: 'move',
    start: function( event, ui ) {
        clicked = false;
    }
};

$('div.map').draggable(options);

var counter = 0;

var $span = $('#ClickCounter > span');
var $dummies = $('.dummy');
$dummies.click(function(){
    if(clicked){
        $span.html(++counter);
    }
    clicked = true;
});

示例:

http://jsfiddle.net/trevordowdle/wsTY5/1/

更新

有时，当您拖动时，它不会注册点击事件，具体取决于您结束拖动的位置。

var options = {
    containment: '.map-containment',
    cursor: 'move',
    start: function( event, ui ) {
        clicked = false;
    },
    stop: function( event, ui ) {
        setTimeout(function(){
            clicked = true;  
        },10);
    }
};

因此，我在选项中添加了 stop 函数，只是为了确保停止拖动后它会计算点击次数。

http://jsfiddle.net/trevordowdle/wsTY5/3/