터치 피드백이란?

태블릿이나 터치기기에서 클릭이벤트 OR 터치이벤트가 발생하면 해당 영역에 약간 회색 배경으로 잠깐 뭐가 잡힌다. 그게 뭘까?

→ “터치 피드백”

사용자가 화면을 터치하면 해당 영역에 잠깐 회색 배경이나 다른 시각적 효과로 표시되어 사용자에게 터치가 성공적으로 인식되었다는 피드백을 제공

이는 사용자의 경험을 향상시키고 터치 입력이 정확하게 처리되었는지 사용자에게 알려주는 데 도움이 된다. 이러한 터치피드백은 대부분의 터치 기반 디바이스에서 기본적으로 제공되는 기능이다.

나는 터치 피드백 기능이 거슬려서 터치피드백을 끄려고 했다!

• 터치 피드백 속성 끄는법

1. CSS 제어

/* 터치 피드백 제거 */
.your-element {
    touch-action: none;
}

2. JS 제어

document.querySelector('.your-element').addEventListener('touchstart', function(e) {
    e.preventDefault();
});

---

웹과 터치 디바이스(태블릿)를 나누어서 구분을 해야하는 경우

 // 페이지 초기화
  const resetbtn = shadowRoot.querySelector(".reset-button");
  const isTouchDevice = "ontouchstart" in window;

  if (!isTouchDevice) {
    resetbtn.addEventListener("click", function (e) {
      e.preventDefault();
      handleReset();
      ****console.log("click");
    });
  }

  resetbtn.addEventListener("touchstart", function (e) {
    e.preventDefault();
    handleReset();
    console.log("touchstart");
  });

---

  const isTouchDevice = "ontouchstart" in window;

"ontouchstart" in window; 는 window 객체에 ontouchstart 이벤트가 있는지 확인한다. ontouchstart 이벤트는 터치 스크린에서 터치가 시작될 때 발생하는 이벤트이다. (즉, 현재 디바이스가 터치 스크린을 지원하는지를 확인)

마무리

이렇게 간단한게 태블릿모드에서 일어나는 '터치피드백'효과를 제거할 수 있다.!