mousedown 및 mouseup시 mousedown 처리기 바인딩 및 바인딩 해제

mousedown, mousemove 및 mouseup을 기반으로 변경되는 drag'n'drop 열, 크기 조정 가능 행 및 크기 조정이 가능한 열이있는 html 테이블을 보유하고 있습니다. 더 나은 성능을 위해, mousemove 동안 "마우스가 다운되어 있는지, 그리고 그렇다면 drag'n'drop, 크기 조정 가능 행 또는 크기 조정 가능 columsn"인지를 지속적으로 확인해야합니다. 또는 mousedown시 문서에 mousemove 처리기를 연결해야합니까? 특정 위치에 마우스를 가져 가면 마우스를 떼어 낼 수 있습니까? 클릭시 핸들러를 바인딩하고 바인딩 해제하는 것은 얼마나 비쌉니까? document.addEventListener('onmousemove', myEventHandler);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

은 빠른 것 같다

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

: 또한 좋은 방법은 단지 예를 들어, 특정 요소에 대한 기능을 발사합니다 "스위치/케이스"로, 각 이벤트 및 필터 1 개 문서 수신기를 가진 것으로 간주 ! –

이 가장 빠른 방법은 이벤트 위임 수 있습니다 : 여기에 항상에만 mousedown 마우스 클릭 사이에 확인 대 mousedown 확인 문서의 예입니다 왜 이것이 가장 빠른가 here. (here에서 예.) document.getElementById("mydiv").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World";

이 방법, 당신은 반복의 오버 헤드를 피하기 :

더 나은 귀하의 경우, 특정 DOM 객체에 이벤트 리스너를 부착 될 수는 <div> 또는 유사한 테이블을 감싸는 핸들러를 부착 및 제거하고, 변경 사항을 트리거하지 않는 이벤트 (예 : 페이지의 다른 곳에서 mousedown하는 동안 마우스를 움직이는 이벤트)에 의해 핸들러가 트리거되는 것을 방지 할 수 있습니다.

출처

2014-09-22 23:06:04 legendof

확실히 바인딩/바인딩 해제는 과도한 작업입니다.이 바인딩의 상태를 저장하는 "전역"컨텍스트에서는 1 변수보다 느립니다.

는 난 항상 변수를 확인 선호

출처

2014-09-22 23:06:25 Tengiz

mousedown 및 mouseup시 mousedown 처리기 바인딩 및 바인딩 해제

답변

관련 문제