JavaScript에서 마우스업 이벤트가 손실되는 이유와 해결 방법

이 글은 Javascript에서 mouseupevent이 손실되는 이유와 해결 방법에 대한 관련 정보를 주로 소개합니다. 이 글은 참고 및 연구를 위한 자세한 샘플 코드를 제공합니다. 그리고 공부하세요.

머리말

엑셀에서 선택한 영역과 유사한 기능을 구현할 때 mouseup 이벤트가 없어 전체 작업을 수행하지 못하는 경우가 많습니다.

드래그 및 이동 작업을 수행하려면 이 문서를 참조할 수도 있습니다.

Cause

현재 두 가지 이유가 발견되었습니다.

• 이 브라우저의 드래그 작업을 트리거하여 마우스업이 손실되었습니다.

• 마우스가 작업 영역을 벗어났기 때문에 mouseleave가 발생하여 mouseup이 손실되었습니다.
  

Solution

첫 번째 사례

시스템의 기본 작업을 방지하려면 다음 코드를 실행하여 드래그가 트리거되는 것을 방지하세요.

//在事件中
e=e || window.event;
pauseEvent(e);

//阻止事件冒泡
//不仅仅要stopPropagation，还要preventDefault
function pauseEvent(e){
 if(e.stopPropagation) e.stopPropagation();
 if(e.preventDefault) e.preventDefault();
 e.cancelBubble=true;
 e.returnValue=false;
 return false;
}

를 호출하여 드래그가 발생하는 것을 방지할 수 있습니다. 이벤트 작업에 대해 PauseEvent 메소드를 사용하므로 해당 영역 내에서 마우스업 손실을 피할 수 있습니다. 구현하려는 작업이 드래그 작업인 ​​경우에도 마우스 움직임을 따르는 DOM 요소를 생성하면 효과를 얻을 수 있습니다.

두 번째 경우

마우스가 영역 밖으로 이동하기 때문에 mouseleave 동작이 발동되기 때문에 이 경우에는 mouseleave 동작을 모니터링해야 하며 동작이 발동되면 정지하거나 복원할 수 있다. 상태.

특별히 주의할 점

마우스 이벤트를 처리할 때 어떤 키를 눌러야 동작이 되는지 제어할지 여부도 고려할 수 있습니다.

마우스 이벤트에는 버튼 속성이 있습니다. 이 값은 마우스가 하나 이상의 버튼을 눌렀음을 나타냅니다.

0: 버튼이 없거나 초기화되지 않았습니다.

1: 왼쪽 마우스 버튼

2: 오른쪽 마우스 버튼

4: 마우스 휠 또는 가운데 버튼

8: 네 번째 버튼(일반적으로 "브라우저 뒤로" 버튼)

16: 아니요. 5개의 버튼(보통 "브라우저 앞으로")

에는 여러 값이 있으며 이는 | 작업을 수행하는 것과 같습니다. 즉, 마우스 왼쪽 버튼과 오른쪽 버튼을 동시에 누르면 1|2=3입니다. value&1!=0을 사용하면 왼쪽 버튼이 눌렸는지 확인할 수 있습니다. 예를 들어 왼쪽 버튼과 오른쪽 버튼을 동시에 누르면 3&1!=0이 true가 되어 왼쪽 버튼이 눌렸음을 나타냅니다.

요약

위 내용은 JavaScript에서 마우스업 이벤트가 손실되는 이유와 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!