javascript - 在 mousedown 和 mouseup 上绑定(bind)和取消绑定(bind) mousedown 处理程序

Question

我有一个 html 表格，其中包含拖放列、可调整大小的行以及根据 mousedown、mousemove 和 mouseup 进行更改的可调整大小的列。为了获得更好的性能，我应该让文档在鼠标移动期间不断检查“鼠标是否按下，如果是，是否用于拖放、可调整大小的行或可调整大小的列”，或者我应该在鼠标按下时将鼠标移动处理程序附加到文档在特定位置，然后在鼠标松开时将其分离？单击时绑定(bind)和取消绑定(bind)处理程序的成本有多大？以下是文档始终检查 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

绑定(bind)/解除绑定(bind)肯定是多余的操作，我确信这比存储状态的“全局”上下文中的 1 个变量慢。另外一个好的做法是考虑为每个事件和过滤器设置 1 个文档监听器，例如“switch/case”，它只会触发某些元素的函数，例如:

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