Question

好的，所以我有这些可拖动的元素，也有点击事件处理程序。问题是当我拖动元素时，click事件被触发（并处理），但我想要的是仅在没有拖动的情况下处理点击，所以当拖动元素时，取消点击事件处理。

这是一个演示小提琴：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/

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

1 个答案: