使用javascript訪問變量（無jQuery）.onmouseup事件

我在理解如何讓變量在我的.onmouseup事件中工作時遇到了一些問題。使用javascript訪問變量（無jQuery）.onmouseup事件

我有一個.onmousemove事件，它定義了一個局部變量，例如自從.onmousedown以來鼠標移動的距離。我想在執行.onmouseup的函數中使用這些信息，但是，我無法在那裏找到它。下面是代碼的相關位：

document.onmousedown = function(){ 
    var mouseStart = [event.pageX,event.pageY]; 
    document.onmousemove = function(){ 
     var dist = Math.sqrt(Math.pow(event.pageY-mouseStart[1],2)+Math.pow(event.pageX-mouseStart[0],2)); 
     document.onmouseup = function() { 
      global_function(dist); 
      document.onmousemove = null; 
     } 
    } 
}

我不明白爲什麼mouseStart是可訪問的，但我得到了得到了錯誤DIST是不確定的。

我還有其他的變量也需要通過，在.onmouseup期間無法重新定義。

來源

2014-01-30 user3253694

你爲什麼要在一個事件處理程序中綁定一個事件*在一個事件處理程序*內？ –

他爲什麼不呢？ – Jake

在Chrome [Fiddle]中工作正常（http://fiddle.jshell.net/Pisi2012/VQKrN/） – alexP

我想你會想在onmousedown處理程序中添加onmouseup事件處理程序。在某些瀏覽器中，mousemove事件觸發每秒發生50次，因此您可以反覆添加和刪除鼠標上/下的事件。然後，您需要在mousedown處理程序中聲明dist。

對於瀏覽器兼容性，event對象被許多瀏覽器傳遞給事件處理程序，而在其他情況下，它是全局變量。一個簡單的加上聲明一個event參數給處理程序就行。

document.onmousedown = function(event) { 
    event = window.event || event; 
    var mouseStart = [event.pageX,event.pageY]; 
    var dist; 

    document.onmouseup = function() { 
     global_function(dist); 
     document.onmousemove = null; 
    }; 

    document.onmousemove = function(ev) { 
     ev = window.event || ev; 
     dist = Math.sqrt(Math.pow(ev.pageY-mouseStart[1],2)+Math.pow(ev.pageX-mouseStart[0],2)); 
    }; 
};

來源

2014-01-30 15:56:06

謝謝，這個工作很好！ – user3253694

如果這個工作，你可以標記爲答案？ –

對不起。我試圖upvote，但沒有聲譽。 – user3253694

確保您的函數定義不是被動地從閉包中繼承event變量。您應該明確接受函數定義中的event變量，即function(event){}，而不是function(){}。

此外，您通過在mousemove事件中計算dist來進行過度計算，在mouseup之前不應計算它。

以下適用於我的Firefox。

document.onmousedown = function(event){ 
    var mouseStart = [event.pageX,event.pageY]; 
    document.onmouseup = function(event) { 
     var dist = Math.sqrt(Math.pow(event.pageY-mouseStart[1],2)+Math.pow(event.pageX-mouseStart[0],2)); 
     console.log(dist); //global_function(dist); 
     document.onmouseup = null; 
    } 
}

來源

2014-01-30 15:58:01 MjrKusanagi

我改變了它這樣的，它的工作：

document.onmousedown = function (evt) { 
    var e = evt || window.event; 
    var mouseStart = [e.pageX, e.pageY]; 
    document.onmouseup = function (ev) { 
     var evnt = ev || window.event; 
     var dist = Math.sqrt(Math.pow(evnt.pageY - mouseStart[1], 2) + Math.pow(evnt.pageX - mouseStart[0], 2)); 
     alert(dist); 
     document.onmouseup = null; 
    }; 
};

正如你看到的我已刪除了onmousemove事件，但它仍然具有相同的結果有效。

來源

2014-01-30 16:00:20

使用javascript訪問變量（無jQuery）.onmouseup事件

回答

相關問題