터치 이벤트처리

stackoverrun.com/ko/q/7854107

javascript - 터치 스크린 장치에 마우스를 감지 나는 장치가 터치 장치인지 여부를 감지하는 다음 �

big-blog.tistory.com/4357

자바 스크립트로 터치 스크린 장치 감지

www.html5rocks.com/en/mobile/touchandmouse/

Touch And Mouse: Together Again For The First Time - HTML5 Rocks

m.blog.naver.com/PostView.nhn?blogId=b_feather&logNo=50117082290&proxyReferer=https:%2F%2Fwww.google.co.kr%2F%20%EC%B6%9C%EC%B2%98:%20https:%2F%2F202psj.tistory.com%2F1158%20%5B%EC%95%8C%EB%A0%88%ED%8F%B0%EB%93%9C%EC%9D%98%20IT%20%EC%9D%B4%EB%AA%A8%EC%A0%80%EB%AA%A8%5D

[javascript] 자바스크립트로 터치 이벤트 환경 및 접속 기기 감지하는 법

enterkey.tistory.com/364

모바일웹 터치 제스쳐 적용기 - [1] 터치 제스쳐 이해하기

모바일 사파리에서 터치를 시도하면 아래와 같은 이벤트가 순서대로 발생한다.

  touchstart - touchend - mouseover - mousemove - mousedown - mouseup - click

 

마우스가 존재하진 않지만, 내부적으로는 터치 이벤트 뿐만 아니라 마우스 이벤트도 발생하는 것을 볼 수 있다.
중요한 건, mouseover 시점에서 화면이 변경될 경우, 이벤트가 멈춘다는 것이다.
(이벤트 발생 프로세스의 자세한 내용은 Safari Developer Library의 Handling Events 챕터를 참고.)

위 문서에는 '화면이 변경(if the contents of page changes)'되는 것에 대한 명확한 정의는 없다.
테스트 해본 결과, '화면이 변경'된다는 것은 정확하게는 '레이아웃이 변경(reflow)'되는 것에 가까운 것 같다.
백그라운드가 변경된다거나, 레이아웃에 영향을 끼치지 않는 정도의 margin/padding이 변경되는 경우(repaint)에는 이벤트가 종료되지 않는다.

따라서, 두 번 클릭해야 실행되는 문제를 해결하기 위해서는,
터치 인터페이스에서는 mouseover 이벤트가 발생했을 때 화면 변경이 되지 않도록 해야 한다.

 

 

ohgyun.com/350

iPad hover 이슈 처리 방법

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

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

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

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

qastack.kr/programming/8291517/disable-hover-effects-on-mobile-browsers

모바일 브라우저에서 호버 효과 비활성화