[jQuery] click 이벤트와 touchend 이벤트의 차이점 및 예제

jQuery에서 click과 touchend 이벤트를 함께 사용해야 하는 경우와 따로 사용해야 하는 경우를 이해하는 것은 모바일과 데스크톱 간 사용자 경험을 최적화하는 데 중요합니다. 두 이벤트의 차이점과 함께 언제 어떤 상황에서 적합한지, 예제 코드를 통해 설명하겠습니다.

click 이벤트와 touchend 이벤트의 차이점

1. click 이벤트
   • 대상: 마우스 클릭 (주로 데스크톱 환경)
   • 특징: 기본적으로 클릭을 감지하며, 모바일 환경에서도 작동하지만, 일부 환경에서는 딜레이가 있을 수 있습니다.
   • 딜레이 문제: 모바일 기기에서는 약 300ms 정도의 딜레이가 발생할 수 있습니다. 이는 이중 클릭 방지와 같은 사용자 경험을 위해 설계된 것입니다.
2. touchend 이벤트
   • 대상: 터치 스크린에서 손을 떼는 동작 (주로 모바일 환경)
   • 특징: 클릭 딜레이 없이 즉각적으로 반응하여 모바일에서 빠른 사용자 경험을 제공합니다.
   • 주의사항: touchend는 데스크톱 환경에서 작동하지 않으며, 터치스크린 장치에서만 의미가 있습니다.

두 이벤트를 같이 사용해야 하는 경우

두 이벤트를 함께 사용해야 할 경우는, 데스크톱과 모바일 모두에서 버튼을 클릭할 때 반응하게 하려는 상황입니다. 모바일에서의 딜레이 문제를 해결하기 위해 touchend와 click을 같이 정의하여 플랫폼에 관계없이 일관된 반응을 제공할 수 있습니다.

$('#myButton').on('click touchend', function(event) {
  // 중복 호출 방지를 위해 touchend 이벤트에서는 기본 이벤트 방지
  event.preventDefault();

  // 이벤트 처리 로직
  alert('버튼이 클릭되었습니다!');

  // touchend 이벤트 발생 시 click 이벤트 중복 실행 방지
  if (event.type === "touchend") {
    $(this).off('click');
  }
});

 

위 코드에서 click과 touchend 이벤트가 동시에 바인딩되어, 어떤 환경에서든 버튼이 눌렸을 때 반응합니다. 다만 touchend 이벤트가 발생하면 click 이벤트를 제거하여 중복으로 호출되는 문제를 방지합니다.

click과 touchend를 따로 사용해야 하는 경우

두 이벤트를 따로 처리해야 할 때는, 각 환경에서 다른 동작을 원할 때입니다. 예를 들어, 데스크톱에서는 click으로 상세 정보를 보여주고, 모바일에서는 touchend로 빠른 반응을 주면서 또 다른 동작을 수행할 때입니다.

// 데스크톱용 click 이벤트
$('#desktopButton').on('click', function() {
  alert('데스크톱에서 클릭되었습니다!');
  // 데스크톱에 특화된 추가 로직 작성
});

// 모바일용 touchend 이벤트
$('#mobileButton').on('touchend', function(event) {
  event.preventDefault(); // 터치 클릭 후 기본 동작 방지
  alert('모바일에서 클릭되었습니다!');
  // 모바일에 특화된 추가 로직 작성
});

 

위와 같이 각각의 환경에 따라 다르게 동작을 정의하면, 모바일과 데스크톱의 사용자 경험을 최적화할 수 있습니다.

요약

• click 이벤트: 데스크톱 및 모바일 모두에서 사용할 수 있지만, 모바일에서는 300ms의 딜레이가 발생할 수 있음.
• touchend 이벤트: 모바일 터치 스크린에서 즉각 반응하며 빠른 사용자 경험 제공.
• 두 이벤트를 같이 사용하는 경우: 플랫폼에 상관없이 일관된 동작을 보장하며, 모바일에서의 딜레이 문제 해결.
• 두 이벤트를 따로 사용하는 경우: 각 환경에 맞게 다른 동작을 제공하여 사용자 경험을 최적화.