조회 수 571 추천 수 0 댓글 2
Extra Form

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

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

  • 아포리아 2019.03.26 15:45
    https://stackoverflow.com/questions/15775242/javascript-touchend-if-element-is-over-another
  • 아포리아 2019.04.11 16:13
    caretRangeFromPoint

    https://developer.mozilla.org/en-US/docs/Web/API/Document/caretRangeFromPoint
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 용량 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )