onmousedown, onmouseup, onclick이 동일한 레이블 노드에 동시에 적용되는 경우 javascript Element_javascript 팁
- WBOY원래의
- 2016-05-16 18:37:191304검색
왜냐하면 JavaScript에서는 mousedown, mouseup 및 click의 실행 순서가 왼쪽에서 오른쪽이기 때문입니다. 더 중요한 것은 일단 mousedown 이벤트가 활성화되면 일반적인 상황에서(mousedown 이벤트에 바인딩되지 않은 메서드는 경고와 유사한 메서드를 사용합니다. -up 개체 상자가 차단됩니다. 이벤트 전달이 없으면(즉, 후속 호출 이벤트가 손실됨) 후자의 두 이벤트가 확실히 활성화됩니다. 일반적으로 우리는 레이블에 하나의 클릭 이벤트만 바인딩합니다. 실제로 클릭 이벤트를 트리거하면 mousedown, mouseup 및 기타 이벤트도 호출되지만 호출 주기가 매우 짧고 이 두 이벤트를 바인딩하는 관련 함수를 작성하지 않았으므로 성공했습니다. 눈치 채지 마세요. 이제 이러한 이벤트를 레이블에 동시에 등록하고 지정된 핸들러 함수를 바인딩하려고 한다고 가정해 보겠습니다. 실제 개발에서는 아래에서 언급한 문제에 직면하게 됩니다.
먼저 간단한 예시를 통해 테스트해보고 제가 언급한 문제를 발견해 직관적인 느낌을 받으시고, 제 솔루션을 살펴보세요.
코드 복사 코드는 다음과 같습니다.
< ;/div>
이제 다음과 같은 요구 사항이 있다고 가정합니다. 사진에서 마우스 버튼을 눌러 사진 드래그를 시작하고, 사진에서 마우스업이 발생하고 마우스를 놓으면 사진의 관련 정보가 표시됩니다. 정상적인 상황에서는 mouseup에 바인딩된 함수가 실행되면 mousedown에 바인딩된 함수도 실행되어 먼저 실행되는데, 이는 이미지 정보를 볼 때 이미지도 드래그된다는 의미입니다. 사실, 당신이 정말로 원하는 것은 매번 메소드 중 하나를 실행하는 것입니다. 마우스를 누르고 잠시 멈추면 이미지 드래그를 준비한다는 의미입니다. 지금은 정보 보기 방법을 실행하지 마세요. 위의 분석을 바탕으로 setTimeout 함수를 사용하여 이러한 요구 사항을 처리할 수 있다는 것을 알았습니다(물론 더 나은 솔루션을 찾으면 꼭 공유해 주세요, 하). 전체 예는 아래에 나와 있습니다. 매우 간단하며 주석도 추가되어 있으며 추가 설명은 없습니다. 코드 복사 코드
관련 주제: 일반적으로 사용되는 클릭 이벤트는 mousedown 및 mouseup 이후에 실행되므로 클릭 대신 mouseup을 사용할 수 있습니다(위 예에서는 이렇게 사용됩니다). 이때는 클릭을 등록할 필요가 없습니다. 요소에 대한 이벤트입니다. 물론, 가능하다면 클릭 대신 마우스다운을 직접 사용할 수도 있으며, 이 쓰기 방식은 지메일 등 일부 구글 제품에서 볼 수 있다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.