Dorong Dorong 💻😴

TOAST UI - 터치와 클릭 이벤트 글에서 생긴 의문을 정리하기 위한 글입니다.

터치 이벤트를 달았는데 왜 클릭 이벤트까지 발생하나요?

• 터치가 발생하면 내가 별도로 클릭 이벤트를 달지 않았어도 click 이벤트가 중복으로 발생해 버립니다.
  왜 이런 동작이 일어나는 걸까요?
• 웹은 오랫동안 마우스 클릭 중심으로 설계되고 발전했습니다.
• 지금까지 많은 사이트가 오직 click 이벤트만 듣고 동작하도록 만들어져 있기 때문에, 모바일 브라우저는 호환성 유지를 위해 터치 시 자동으로 click 이벤트도 함께 발생시키도록 설계돼 있습니다. 그렇기에 터치스크린 환경에서도 기존 마우스 중심 사이트들이 별도 수정 없이 동작할 수 있습니다.

터치 이벤트 후 click 이벤트가 발생하는 게 왜 편의일까요?

• 여러 자료에서 이걸 편의라고 하던데 표현이 너무 포괄적으로 느껴져서 그런지 처음에는 이해가 되지 않았습니다. 아래는 제가 찾아본 후 이해한 내용입니다!
  
  • 브라우저는 이 사이트가 터치/클릭 둘 다 지원하는지, 어떤 식으로 의도했는지 알 방법이 없습니다.
  • 그래서 일괄적으로, 터치가 발생하면 반드시 click 이벤트도 같이 발생하도록 만들었습니다.
  • 브라우저는 저희가 만든 사이트만 띄우는 것이 아니라 아주 많은 사이트를 동시에 지원해야 합니다. 모바일 도입 초기엔 대부분 오직 클릭 이벤트만 사용했기 때문에, 터치 이벤트만 발생시 클릭 이벤트가 발생하지 않으면 옛날 사이트들이 모바일에서 먹통이 될 수 있다고 판단했습니다. 그래서 터치 시 자동으로 클릭 이벤트도 발생시키도록 설계되었고 기존 클릭 기반 사이트와의 호환성도 보장합니다.

React 등에서도 클릭 이벤트가 발생할까요?

• 많이 사용하는 React 기준으로 여기서도 브라우저의 이벤트 위임 메커니즘을 그대로 따랐습니다. 브라우저의 네이티브 이벤트 시스템을 그대로 활용했기 때문에 동일한 동작이 발생해요.
• 브라우저가 터치 이벤트 후 자동으로 마우스와 클릭 이벤트를 생성하는건 React 이전 단계에서 일어납니다.
• React는 브라우저의 네이티브 이벤트를 감싸는 SyntheticEvent를 사용하고 있어요. 하지만 브라우저의 기본 이벤트 동작은 변경하지 않습니다.
• 그리고 이벤트 위임을 사용하지만 이건 이벤트 처리 방식을 최적화하는 것이지 브라우저의 기본 이벤트 동작을 바꾸는게 아닙니다.
• 관련 토론인 GitHub 이슈 #9809를 정리해보면,
  
  • preventDefault() 무효화: React의 합성 이벤트에서 e.prevnetDefault()가 클릭 이벤트 방지에 실패
  • 네이티브 DOM API는 작동: addEventListener로 직접 등록하면 preventDefault()가 정상 동작
  • 브라우저별 차이: Chrome, Firefox, Safari에서 각각 다르게 동작 (추가 확인이 필요)
• 위의 내용은 관련 이슈를 직접 보고 상세 내용과 이유를 확인해 보는걸 추천드립니다!
• 이슈에서 제시된 해결책들도 짧게라도 정리해 보겟습니다.

// 방법 1: 네이티브 DOM API 사용
componentDidMount() {
  this.elem.addEventListener('touchstart', e => {
    e.preventDefault(); // 이건 작동함
  });
}

// 방법 2: 플래그 사용
handleTouchStart(event) {
  this.hasBeenTouchedRecently = true;
  setTimeout(() => { 
    this.hasBeenTouchedRecently = false; 
  }, 500);
}

handleMouseDown(event) {
  if(this.hasBeenTouchedRecently) {
    return; // 터치 후 마우스 이벤트 무시
  }
}

 <meta name="viewport" content="width=device-width">