Question

如果在'mousedown'事件后移动鼠标，我正在尝试阻止点击事件。目前我通过条件和布尔值手动完成所有操作。我仍然没有按照我想要的方式工作，而且我觉得实现这个目标只是一种糟糕的方法。

var mousemove = false;
var mousedown = false;
var cancelClick = false;

$('.example').click( function() {
    if (!cancelClick) {
        if ( $(this).attr('id') === 'example-green') {
            $(this).attr('id', 'example-blue');
        } else {
            $(this).attr('id', 'example-green');
        }  
    }
    cancelClick = false;
});

$('.example').mousedown( function() {
    mousedown = true;
});

$('.example').mouseup( function() {
    if (mousemove) {
        cancelClick = true;
    }
    mousedown = false;
    mousemove = false;
});

$('.example').mousemove( function() {
    if (mousedown) {
        mousemove = true;
    }
});

http://jsfiddle.net/aGf6G/4/

有没有更简单的方法来实现这一目标？最好是防止点击事件被处理的一个，或者从待处理的事件队列中删除它们（我不确定它们是否在你释放鼠标之前排队）。这样回调本身就不会与此实现相结合。

Answer 1

我只是将鼠标的x / y坐标存储在mousedown上，并将其与点击中的当前坐标进行比较。

$('.example')
   .on('mousedown', function() {
        $(this).data("initcoords", { x: event.clientX, y: event.clientY });
    })
   .on('click', function() {
        var initCoords = $(this).data("initcoords") || { x: 0, y: 0 };

        if (event.clientX === initCoords.x && event.clientY === initCoords.y) {
            if ( $(this).attr('id') === 'example-green') {
                $(this).attr('id', 'example-blue');
            } else {
                $(this).attr('id', 'example-green');
            }  
            $(this).data('initcoords', {x:-1, y:-1});
        }
    });

http://jsfiddle.net/zp2y2/8/

您还可以打开和关闭点击事件。它更简洁，但我想知道与上述方法相比，设置事件处理程序的开销。

$('.example')
    .on('mousedown', function() { $(this).one("click", handleClick); })
    .on('mousemove mouseout', function() { $(this).off('click'); });

function handleClick(){
    var $el = $('.example');
    if ( $el.attr('id') === 'example-green') {
        $el.attr('id', 'example-blue');
    } else {
        $el.attr('id', 'example-green');
    }  
}

http://jsfiddle.net/du7ZX/

Answer 2

编辑：http://api.jquery.com/event.stopimmediatepropagation/这是一个阻止一个元素上的所有事件执行除了你想要的事件之外的事件。

如果不同事件不是全部在同一元素上，而是在子/父之间传播，您可以：

Event.stopPropagation（）将停止除您实际想要的事件之外的所有其他事件。

我相信这是您的解决方案：http://api.jquery.com/event.stoppropagation/

这是一个使用和不使用stopPropagation进行实际测试的jsfiddle：在这个例子中，我展示了div中的div如何从其父级继承事件。请注意，在第二个示例中，如果先将鼠标悬停在内部div上，则会收到两个警报。如果您在第一个示例中鼠标悬停内部div，则只会收到一个警报。

http://jsfiddle.net/Grimbode/vsKM9/3/

/** test with stopprogation **/
$('#test').on('mouseover', function(event){
    event.stopPropagation();
    alert('mouseover 1');
});
$('#test2').on('mouseover', function(event){
    event.stopPropagation();
    alert('mouseover 2');
});

/*** test with no stoppropagation ***/
$('#test3').on('mouseover', function(event){
    alert('mouseover 3');
});
$('#test4').on('mouseover', function(event){
    alert('mouseover 4');
});

您还可以使用.off（）方法删除特定元素上的事件。

Answer 3

这是另一种选择，我测试了它并且效果很好：

$('.example')
   .on('mousedown', function() {
        $(this).data("couldBeClick", true );
    })
   .on('mousemove', function() {
        $(this).data("couldBeClick", false );
    })
   .on('click', function() {
        if($(this).data("couldBeClick")) {

            alert('this is really a click !');
        }
    });

如果在mousedown之后移动鼠标，则取消传入的jQuery单击事件

3 个答案: