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处理程序

回答

相关问题