mousedown 요소 외부에서 mouseup 이벤트를 캡처하는 방법은 무엇입니까?

Question

onmousedown이 트리거 된 요소 외부에서 마우스 단추를 놓으면 Javascript onmouseup event이 트리거되지 않습니다.

이로 인해 JQuery UI에서 드래그 오류가 발생합니다. JQuery draggable 요소는 컨테이너 외부에서 마우스 버튼을 놓을 때 드래그를 중지하지 않습니다. 요소가 부모 경계에 도달하면 이동이 중지되기 때문입니다. 재현 단계 :

• http://jqueryui.com/draggable/으로 이동하십시오.
• 드래그 마우스까지 드래그 아래로는
• 이동 마우스 다시 용기
• 그리고 아직도 끌고있는 드래그로 주변 컨테이너
• 릴리스 마우스 버튼 (어떤 마우스 버튼이 시점에서 누르지)을 남겼습니다. 마우스 단추를 놓자 마자 끌기가 멈추는 것을 기대할 것입니다. 아무 문제없이 어디서 출시됩니까?

최신 Chrome 및 IE에서이 동작을 볼 수 있습니다.

해결 방법이 있습니까?

나는 우리가 mouseout 또는 mouseleave에 컨테이너를 끌어 막을 수 있다는 것을 알고 있지만, 나는 많은 마우스를 놓으면 google maps (상관없이,처럼, 부모 컨테이너 외부어도, 드래그 유지하는 데 싶습니다 항상지도를 드래그하는 것을 멈 춥니 다.)

Answer 1

해결 방법 : mouseup 이벤트 핸들러를 document에 연결하기 만하면됩니다. 브라우저 외부에서 마우스 버튼을 놓더라도 항상 취소됩니다.

물론 이것은 좋은 해결책은 아니지만 분명히 제대로 작동하도록 드래그하는 유일한 방법입니다.

Answer 2

이 문제를 해결하는 가장 좋은 방법은 mousemove 이벤트 처리기의 현재 버튼 상태를 확인하는 것입니다. 버튼이 더 이상 작동하지 않으면 드래그를 중지합니다.

문서에 mouseup 이벤트를 넣은 다음 문제를 위로 이동하면 문서 외부에 단추를 놓아도 (또는 브라우저 창 외부에서도) 원래 문제가 계속 표시됩니다. 그것이 MouseMove 이벤트에 의해 체포되기 때문에 jQuery를

와 예를 들어

$div.on("mousedown", function (evt) { 
     dragging = true; 
    }).on("mouseup", function (evt) { 
     dragging = false; 
    }).on("mousemove", function (evt) { 
     if (dragging && evt.button == 0) { 
      //Catch case where button released outside of div 
      dragging = false; 
     } 
     if (dragging) { 
      //handle dragging here 
     } 
    }); 

당신은 MouseUp 이벤트 핸들러를 건너 뛸 수도 있지만 여전히 거기에 더 읽을 생각합니다.