집 > 기사 > 웹 프론트엔드 > JS의 터치시작 이벤트와 클릭 이벤트 간의 충돌에 대한 해결 방법

JS의 터치시작 이벤트와 클릭 이벤트 간의 충돌에 대한 해결 방법

亚连원래의: 2018-05-31 10:21:422133검색

이 글에서는 주로 JS의 터치스타트 이벤트와 클릭 이벤트의 충돌에 대한 해결 방법을 샘플 코드를 통해 자세히 소개합니다. 이는 모든 사람의 학습이나 작업에 필요한 참조 학습 가치가 있습니다. 편집자를 따라가서 함께 배워보세요.

머리말

모바일 인터넷은 미래의 발전 추세입니다. 현재 많은 국내 인터넷 거대 기업들이 모바일 파이를 놓고 싸우고 있습니다. 물론 현재는 다양한 앱과 웹 애플리케이션도 있습니다.

다음 글에서는 JS의 터치스타트 이벤트와 클릭 이벤트 간의 충돌 해결에 대한 관련 내용을 주로 소개합니다. 아래에서는 많이 언급하지 않겠습니다. 자세한 소개를 살펴보겠습니다.

1· 사업 시나리오 설명

완성된 PC 사이트를 모바일 단말에 적용할 때 모바일 기기에서 사이트의 응답 속도를 높여 사용자에게 더 나은 경험을 선사하고자 합니다. 이때 우리는 모바일 장치별 이벤트 시스템을 사용해야 합니다. 예를 들어 클릭 이벤트 대신 touchstart 이벤트를 사용해야 합니다.

이 효과가 더 좋은 이유는 무엇입니까? Google 개발자 문서의 설명에 따르면:

모바일 장치의 브라우저는 클릭 이벤트가 트리거될 때 이것이 "더블 클릭" 이벤트가 아닌 "클릭" 이벤트인지 확인하기 위해 300ms를 지연시킵니다.
터치스타트 이벤트의 경우 사용자의 손가락이 화면을 터치하는 순간 바운드 이벤트가 트리거됩니다. 따라서 클릭 이벤트를 대체하기 위해 touchstart를 사용하는 것의 중요성은 사용자가 클릭할 때마다 300ms를 절약하는 데 도움이 된다는 것입니다. 페이지에서 클릭이 자주 발생하거나 애니메이션 도중에 클릭이 발생하여 애니메이션 유창성이 요구되는 상황에서는 이 기술을 사용하는 것이 매우 필요합니다.

그러나 초기 시나리오로 돌아가서 PC 사이트를 모바일 단말에 적용하면 PC가 터치스타트 이벤트를 인식하지 못하기 때문에 단순히 터치스타트 및 클릭 이벤트를 교체할 수는 없습니다.

II · 충돌 이유

물론 터치스타트와 클릭 이벤트를 동시에 요소에 바인딩할 수 있지만 이렇게 하면 이 문서에서 문제가 해결됩니다. 이 두 이벤트는 모바일 장치에서 충돌이 발생합니다.

모바일 기기는 터치스타트와 클릭 이벤트를 동시에 인식할 수 있기 때문에 사용자가 타겟 요소를 클릭하면 타겟 요소에 바인딩된 터치스타트 이벤트와 클릭 이벤트(약 300ms 후)가 순차적으로 발생합니다. , 우리가 바인딩한 이벤트 지정된 콜백 함수가 두 번 실행됩니다! . 이는 분명히 우리가 원하는 결과가 아닙니다.

Three·Solution

이 상황에는 다음 두 가지 해결 방법이 있습니다.

(1) PreventDefault 사용

첫 번째 해결 방법은 이벤트 개체에서 PreventDefault 메서드를 사용하는 것입니다. PreventDefault 메소드는 요소의 기본 이벤트 동작의 발생을 방지하는 것이지만 흥미로운 점은 touchstart 및 click 이벤트를 대상 요소에 동시에 바인딩할 때 touchstart 이벤트 콜백 함수에서 이 메소드를 사용하면 후속 이벤트를 방지할 수 있다는 것입니다. 클릭 이벤트가 발생합니다.

결국 우리가 추가한 클릭 이벤트는 요소의 "기본 이벤트"가 아니지만 작동합니다. 즉, 브라우저에서 구현되므로 이것을 사용할 수 있습니다. 모바일 문제를 해결하기 위한 방법입니다. 콘솔에는 touchstart 이벤트 필드만 표시됩니다. 분명히 클릭 이벤트가 성공적으로 차단되었습니다.

요약

이 방법을 사용하는 장점은 간단하고 조잡하며 직접적이고 효과적이며 우리의 목표를 매우 잘 달성할 수 있다는 것입니다. 그러나 단점은 PreventDefault 방법이 브라우저 구현에서 클릭 이벤트를 방지하는 것이 아니라 브라우저 구현에서 클릭 이벤트를 방지한다는 것입니다. PreventDefault 이 방법이 실패하는 특정 시나리오를 찾지 못했지만 원칙적으로 이는 약간의 불확실성을 가져옵니다.

(2) 바인딩 이벤트의 함수 기반 감지

브라우저가 터치스타트 이벤트를 지원하는지 여부를 판단하여 요소의 클릭 이벤트를 캡슐화할 수 있으므로 클라이언트는 요소가 바인딩되어야 하는 이벤트 유형을 결정할 수 있습니다. 현재 환경을 기준으로 코드는 다음과 같습니다.

const Button = document.getElementById("targetButton")
Button.addEventListener("touchstart", e => {
 e.preventDefault()
 console.log("touchstart event!")
})
 
Button.addEventListener("click", e => {
 e.preventDefault()
 console.log("click event!")
})

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

JS의 터치시작 이벤트와 클릭 이벤트 간의 충돌에 대한 해결 방법

관련 기사