https://developers.google.com/web/fundamentals/design-and-ux/input/touch/

CSS 속성 touch-action을 사용하여 요소의 기본 터치 동작을 제어할 수 있습니다.

이 예시에서는 사용자 터치 시에 브라우저가 아무것도 수행하지 못하도록 touch-action: none을 사용합니다.

이렇게 하면 모든 터치 이벤트를 가로챌 수 있습니다.

/* Pass all touches to javascript*/
touch-action: none;

touch-action: none은 모든 기본 브라우저 동작을 차단하므로 다소 위험한 옵션입니다. 상당수 경우 아래 옵션 중 하나가 더 나은 해결책입니다. touch-action을 사용하면 브라우저에 의해 구현된 동작을 비활성화할 수 있습니다. 예를 들어, IE10 이상에서는 동작 확대/축소를 위해 두 번 탭을 지원합니다. manipulation의 touch-action을 설정하여 기본 두 번 탭 동작을 차단할 수 있으며, 여러분이 두 번 탭 동작을 직접 구현할 수 있습니다.

다음은 흔히 사용되는 touch-action 값의 목록입니다.

터치 동작 매개변수

touch-action: none

터치 상호작용이 브라우저에 의해 처리되지 않습니다.

touch-action: pinch-zoom

`touch-action: none`과 같은 모든 브라우저 상호작용을 비활성화합니다. `pinch-zoom`은 여전히 브라우저에 의해 처리됩니다.

touch-action: pan-y pinch-zoom

세로 스크롤이나 핀치 줌을 비활성화하지 않고도 가로 스크롤을 자바스크립트에서 처리합니다(예: 이미지 캐러셀).

touch-action: manipulation

두 번 탭 동작을 비활성화합니다. 이 경우 브라우저에 의한 클릭 지연이 방지됩니다. 스크롤과 핀치 줌을 브라우저에게 맡깁니다.