mousedown和mouseup綁定和解除mousedown處理程序

我有一個html表，它具有drag'n'drop列，可調整大小的行，以及基於mousedown，mousemove和mouseup更改的可調整大小的列。爲了獲得更好的性能，在鼠標移動過程中是否應該讓文檔不斷檢查「鼠標是否關閉，如果是，是否拖放鼠標，可調整大小的行或可調整大小的列」，或者我應該在鼠標移動時將鼠標移動處理程序附加到文檔在一個特定的位置，然後解開它在mouseup？在點擊時綁定和取消綁定處理程序的成本是多少？這裏一直是鼠標按下檢查VS只鼠標按下和鼠標點擊之間檢查文檔的例子：mousedown和mouseup綁定和解除mousedown處理程序

/* document is always checking mousemove */ 

$(selector).mousedown(function(){ 
    dropndrag = true; 
}); 

$(document).mousemove(function(){ 
    if (dropndrag == true) { 
     //do mouse move stuff 
    } 
}); 

$(document).mouseup(function(){ 
    if (dropndrag == true) { 
     dropndrag = false; 
    } 
}); 


/* mousemove only bound to document after mousedown */ 

$(selector).mousedown(function(){ 
    // attach handlers 
    $(document).mousemove(mousemove); 
    $(document).mouseup(mouseup); 
}); 

function mousemove(){ 
    // do mouse move stuff; 
}; 

function mouseup() { 
    //unbind mousemove and mouseup handlers 
    $(document).off('mousemove', mousemove); 
    $(document).off('mouseup', mouseup); 
}

來源

2014-09-22 Rudy Gagneron

我總是喜歡檢查變量，似乎更快！ – 2014-09-22 22:59:23

事實上，最快的方法可能是事件委派： document.addEventListener('onmousemove', myEventHandler);

有一個很好的例子和討論爲什麼這是最快的here。

更妙的是附加的事件監聽到特定的DOM對象，在你的情況下，<div>或類似的換行表格： document.getElementById("mydiv").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World";（實例here）

這樣，就避免了重複開銷附加和刪除處理程序，並且還可以避免由不會觸發任何更改的事件觸發處理程序（即在頁面中某處其他位置移動鼠標時）。

來源

2014-09-22 23:06:04 legendof

絕對綁定/解除綁定是多餘的操作，我確信在存儲它的狀態的「全局」上下文中，它比1個變量慢。另外一個好的做法視爲具有1個文檔偵聽每個事件和過濾器，如「開關/箱」，其僅將觸發某些元素的功能，例如：

var events = ['mousedown', 'mouseup', 'mousemove']; 

var dragged = false; 

var eventHandler = function (e) { 
    switch (e.type) { 
     case 'mousedown': 

      switch (e.srcElement.id) { 
       case 'test-block': 
        if (dragged) return; 
        dragged = true; 

        console.log('you clicked on the test-block'); 
        break; 
      } 

      break; 
     case 'mouseup': 

      break; 
     case 'mousemove': 

      break; 
    } 
}; 

for (var i = 0; i < events.length; i++) { 
    $(document)[events[i]](eventHandler); 
}

來源

2014-09-22 23:06:25 Tengiz

mousedown和mouseup綁定和解除mousedown處理程序

回答

相關問題