兩個jQuery事件處理程序-當兩個都被觸發時執行代碼

Question

當兩個事件處理程序都被觸發時，我想運行一些代碼。 我已經這樣嘗試過了：

$('#box').mousedown(function(){ 
    $(document).bind('mousemove',function(e){ 
       // more code here 
    }); 
}); 

但是，當我一次觸發mousedown並隨后移動鼠標時，代碼甚至可以工作。 我只想在鼠標向下移動時執行代碼。 我該如何實現？

Answer 1

試一試嗎？ 有一個全局變量，指示鼠標是否按下。 當他們將鼠標懸停在#box元素上時，全局變量將設置為true。 當他們將鼠標移到上方時，將其設置為false。 在此處查看一個實時示例 。

$(document).ready(function(){
    var mouseDown = false;

    $("#box").mousedown(function(){
        mouseDown = true;
    });

    $(document).mouseup(function(){
        mouseDown = false;
    });

    $(document).mousemove(function(){
        if (mouseDown){
            //do your stuff here
        }
    });
});

Answer 2

我認為您遇到的問題是您對事件處理程序的工作方式的了解，一旦添加了事件處理程序，它將偵聽其事件。

因此，您的代碼將添加一個事件處理程序，以在dom准備就緒時偵聽mousedown ，一旦發生，它將為mousemove添加一個事件-該文檔現在已注冊了兩個事件處理程序，因此將為這兩個事件獨立進行處理。

您想要做的是在mouseup事件上刪除mousemove的事件處理程序。 這樣，文檔現在不再偵聽mousemove事件處理程序，因為它已被刪除。

$('#box').mousedown(function(){
    $(document).bind('mousemove',function(e){ 
        // Do something:
    }); 
});
$(document).mouseup(function(){
    $(document).unbind('mousemove'); 
});

這是一個簡單的示例 ，因此您可以看到發生了什么，它將在box下添加一條消息。

Answer 3

使用

event.stop()

要么

event.die()

使用事件前的摘要。 例：

$("#mybutton").unbind("click");
$("#mybutton").die();
$("#mybutton").click(function(){ alert("Hy mate!");});