ios 터치이벤트 (hover이벤트 문제, 더블터치시 화면확대현상)

2020. 10. 5. 14:02

iOS Safari에서 더블 터치로 인한 화면 확대 방지 (두번 탭 확대 방지)

iOS 10에서부터 뷰포트 메타에 user-scalable=no 가 정상 실행되지 않아 사용자의 임의 확대 축소를 막을 수 없게 됨.

touch-action: manipulation를 사용하는 것으로 해결이 안되는 상황일 때.

note.toice.net/2017/09/13/iOS-double-touch-zoom/

iOS 두번 탭 확대 방지

iOS Safari에서 더블 터치로 인한 화면 확대 방지 iOS 10에서부터 뷰포트 메타에 user-scalable=no 가 정상 실행되지 않아 사용자의 임의 확대 축소를 막을 수 없게 됨. 문제사용자의 확대/축소 의도가 아�

note.toice.net

해결 방법

어떡하지 고민하다 그런 문제가 발생하지 않는 기존 작업페이지를 보니 FastClick이 모두 적용되어 있어서 체크해보니 해당 현상을 막을 수 있는게 덤.
FastClick 플러그인 적용 https://github.com/ftlabs/fastclick

주의

이미 작업되어진 페이지에 추가로 FastClick 플러그인을 사용할 경우 페이지내 클릭 테스트가 필요.
특히 iScroll 플러그인을 사용한 영역에서 클릭이 되지 않을 수 있으니 특히 더 주의.
만약 플러그인 적용 후 클릭이 되지 않으면 해당 엘리먼트 클래스에 needsclick 추가.
(참고 : https://github.com/ftlabs/fastclick#ignore-certain-elements-with-needsclick)

hover이벤트 문제

마우스를 시뮬레이션하기 위해 Webkit 모바일과 같은 브라우저는 사용자가 터치 스크린 (예 : iPad)에서 손가락을 뗀 경우 다음 이벤트를 발생시킵니다 (출처 : html5rocks.com의 Touch And Mouse ).

touchstart
touchmove
touchend
300ms 지연, 브라우저는 이것이 두 번 탭이 아니라 한 번 탭인지 확인합니다.
mouseover
mouseenter
- 참고 하십시오 경우 mouseover, mouseenter또는 mousemove이벤트 페이지 내용을 변경, 다음 이벤트가 실행되지 않습니다.
mousemove
mousedown
mouseup
click

단순히 웹 브라우저에 마우스 이벤트를 건너 뛰도록 지시하는 것은 불가능 해 보입니다.

더 나쁜 것은 마우스 오버 이벤트가 페이지 콘텐츠를 변경하는 경우 Safari 웹 콘텐츠 가이드-이벤트 처리 , 특히 One-Finger 이벤트의 그림 6.4에 설명 된대로 클릭 이벤트가 발생하지 않는다는 것 입니다. 정확히 "내용 변경"은 브라우저와 버전에 따라 다릅니다. iOS 7.0의 경우 배경색 변경은 콘텐츠 변경이 아닙니다 (또는 더 이상 변경되지 않습니까?).

qastack.kr/programming/3038898/ipad-iphone-hover-problem-causes-the-user-to-double-click-a-link

iPad / iPhone 호버 문제로 인해 사용자가 링크를 두 번 클릭합니다.

qastack.kr

humanwhocodes.com/blog/2012/07/05/ios-has-a-hover-problem/

iOS has a :hover problem

humanwhocodes.com

qastack.kr/programming/3038898/ipad-iphone-hover-problem-causes-the-user-to-double-click-a-link

iPad / iPhone 호버 문제로 인해 사용자가 링크를 두 번 클릭합니다.

qastack.kr

qastack.kr/programming/3038898/ipad-iphone-hover-problem-causes-the-user-to-double-click-a-link

iPad / iPhone 호버 문제로 인해 사용자가 링크를 두 번 클릭합니다.

qastack.kr