[jQuery] click과 touchend 차이점 및 주의사항

jQuery에서 이벤트를 다룰 때, click과 touchend 이벤트는 비슷해 보이지만, 모바일 환경에서는 큰 차이가 있습니다. 이 글에서는 click과 touchend의 차이점, 주의해야 할 점, 그리고 이를 고려한 예제 코드를 설명하겠습니다.

---

1. click과 touchend의 차이점

click 이벤트

• 마우스로 요소를 클릭할 때 발생합니다.
• 모바일에서는 터치(touch) 이벤트가 발생한 후에도 click이 자동으로 실행됩니다.
• 브라우저에 따라 약간의 지연(delay, 약 300ms)이 발생할 수 있습니다.

touchend 이벤트

• 모바일 기기에서 화면을 터치한 후 손가락을 뗄 때 발생합니다.
• click 이벤트보다 빠르게 실행됩니다.
• 데스크톱 환경에서는 touchend가 발생하지 않습니다.

---

2. 주의해야 할 점

① 이중 이벤트 발생 문제

모바일에서는 touchend 발생 후 click도 실행되므로, 동일한 동작이 두 번 실행될 수 있습니다. 예를 들어:

$(document).ready(function() {
    $("#myButton").on("click", function() {
        alert("클릭 이벤트 발생!");
    });

    $("#myButton").on("touchend", function() {
        alert("터치 이벤트 발생!");
    });
});

 

위 코드를 실행하면 모바일에서는 버튼을 터치했을 때 **"터치 이벤트 발생!"**과 **"클릭 이벤트 발생!"**이 연속해서 두 번 실행될 수 있습니다.

② 300ms 지연 문제

과거에는 모바일 브라우저에서 더블탭(더블 클릭) 동작을 지원하기 위해 click 이벤트가 약 300ms 지연되었습니다. 최신 브라우저에서는 meta viewport 설정을 올바르게 하면 이 문제가 해결됩니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

 

하지만 여전히 구형 브라우저에서는 지연이 발생할 수 있습니다.

③ 데스크톱 환경에서 touchend 미지원

touchend는 모바일 전용 이벤트이므로 데스크톱에서는 동작하지 않습니다. 따라서 click과 touchend를 함께 사용할 때, 환경에 따라 적절히 처리해야 합니다.

---

3. 해결 방법

이 문제를 방지하기 위해 touchend 이벤트가 발생했을 때 click 이벤트가 실행되지 않도록 처리할 수 있습니다.

$(document).ready(function() {
    let touched = false;

    $("#myButton").on("touchend", function(event) {
        event.preventDefault(); // 클릭 이벤트 방지
        if (!touched) {
            touched = true;
            alert("터치 이벤트 발생!");
            setTimeout(() => touched = false, 300); // 300ms 후 초기화
        }
    });

    $("#myButton").on("click", function(event) {
        if (!touched) {
            alert("클릭 이벤트 발생!");
        }
    });
});

 

💡 코드 설명

• touchend 이벤트 발생 시 event.preventDefault();를 호출하여 click 이벤트를 방지할 수 있습니다.
• touched 변수를 사용하여 touchend가 발생했을 때 300ms 동안 click이 실행되지 않도록 처리합니다.