Question

我有一个html表，其中包含拖放列，可调整大小的行以及可根据mousedown，mousemove和mouseup更改的可调整大小的列。为了获得更好的性能，我是否应该让文档不断检查鼠标是否已关闭，如果是这样，是否可以拖放，可调整大小的行或可调整大小的columsn＆＃34;在mousemove期间，还是应该将mousemove处理程序附加到特定位置的mousedown上，然后在mouseup上删除它？点击时绑定和取消绑定处理程序的成本有多高？下面是一个文档示例，它总是检查mousedown与仅在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);
}

Answer 1

绝对绑定/取消绑定是多余的操作，我确信它比一个＆＃34;全局＆＃34;中的1个变量慢。用于存储其状态的上下文。另外一个好的做法是考虑为每个事件和过滤器设置1个文档监听器，例如＆＃34; switch / case＆＃34;它只会触发某些元素的函数，例如：

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);
}

Answer 2

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

有一个很好的例子和讨论为什么这是最快here。

更好的方法是将事件监听器附加到特定的DOM对象，在您的情况下是<div>或类似的包装您的表： document.getElementById("mydiv").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World";（来自here的示例。）

这样，您可以避免重复附加和删除处理程序的开销，并且还可以避免由不会触发任何更改的事件触发处理程序（即在页面中其他位置的mousedown期间移动鼠标））。

在mousedown和mouseup上绑定和解除绑定的mousedown处理程序

2 个答案: