터치 이벤트 이해

터치 이벤트 이해

---

내 라이브러리 중 일부를 터치 장치에서 작동하도록하려고하지만 지원 방법과 작동 방식을 파악하는 데 어려움을 겪고 있습니다.

기본적으로 5 개의 터치 이벤트 가 있지만 이벤트 에 대해서만 모바일 브라우저간에 합의가있는 것 같습니다 touchstart(duh). 테스트 케이스로 바이올린 을 만들었습니다 .

Android 4가 탑재 된 Galaxy Note에서이를 테스트했지만 데스크톱 브라우저에서도 링크를 확인할 수 있습니다.

목표는 탭, 더블 탭 및 롱 탭을 처리하는 방법을 파악하는 것입니다. 멋진 것은 없습니다.

기본적으로 다음과 같은 일이 발생합니다.

안드로이드 재고 브라우저가 되지 화재 터치 이벤트를한다. 그냥 탭, 쏜 마우스 클릭 모방을 시도 mousedown, mouseup그리고 click연속적으로 이벤트를하지만, 더블 탭은 그냥 그쪽으로 페이지를 확대하거나 축소.

Android 용 Chrome 은 손가락이 화면을 터치하면 touchstart 이벤트를 시작합니다. 그것이 곧 출시 있다면, 그 다음 발사 mousedown, mouseup, touchend그리고 마지막 click이벤트.

길게 두드리는 경우 약 0.5 초 후 mousedown및 mouseup, touchend손가락을 떼면 click끝에서 아무 이벤트 도 발생하지 않습니다 .

당신이 경우 손가락을 이동 , 그것은 발사 touchmove몇 번, 다음은 화재 이벤트 touchcancel이벤트를, 아무것도조차, 이후 발생하지 touchend손가락을 들어 올릴 때 이벤트입니다.

더블 탭 IN / OUT 줌이 기능 트리거하지만 이벤트 현명한 콤보 화재 touchstart- touchevent두 배는 더 마우스 이벤트로는, 발사했다.

Android 용 Firefox 는 touchstart이벤트를 올바르게 실행하고 짧은 탭 실행의 mousedown경우 mouseup, touchend및 click그 이후에 실행됩니다.

의 경우 긴 탭 , 그것은 화재 mousedown, mouseup그리고 마지막 touchend이벤트. 이러한 점에 대해서는 Chrome과 동일합니다.

하지만이 경우 손가락을 이동 , 만약 화재 touchmove지속적으로 (하나는 예상을했던 것으로서)하지만 아무튼 하지 화재 touchleave이벤트를 할 때 손가락 나뭇잎 이벤트 리스너 요소 및 발생하지 않습니다 touchcancel손가락이 브라우저 뷰포트의 출소 할 때 이벤트를 .

들어 더블 탭 , 그냥 크롬처럼 동작합니다.

Opera Mobile 은 짧은 탭으로 Chrome 및 Firefox와 동일한 작업을 수행하지만 길게 누르면 실제로 비활성화하고 싶은 일종의 공유 기능이 활성화됩니다. 손가락을 움직이거나 두 번 탭하면 Firefox처럼 작동합니다.

크롬 베타는 짧은 탭에 대한 일반적인 않지만, 긴 탭의 경우에는 발생하지 않습니다 mouseup, 단지 더 이상 이벤트를 touchstart한 후 mousedown0.5 초 후, 다음 touchend손가락을 들어 올릴 때. 손가락을 움직이면 이제 Firefox 및 Opera Mobile처럼 작동합니다.

의 경우 더블 탭 , 그것은 터치 이벤트를 발생하지 않습니다 축소 할 때 , 만에 확대 할 때.

Chrome 베타는 가장 이상한 동작을 보여 주지만 베타이기 때문에 불평 할 수는 없습니다.

질문은 가장 일반적인 터치 장치 브라우저에서 짧은 탭, 긴 탭 및 이중 탭을 감지하는 간단하고 방법이 있습니까?

안타깝게도 Safari가 설치된 iOS 장치 또는 Windows Phone 7 / Phone 8 / RT 용 IE에서 테스트 할 수는 없습니다.하지만 가능하다면 피드백을 주시면 감사하겠습니다.

---

아직 읽지 않았다면 Hammer.js의 소스 코드를 읽는 것이 좋습니다.

https://github.com/hammerjs/hammer.js/blob/master/hammer.js

주석과 코드 사이에는 약 1400 줄이 있으며 훌륭한 문서가 있으며 코드는 이해하기 쉽습니다.

작성자가 많은 일반적인 터치 이벤트를 해결하기 위해 선택한 방법을 확인할 수 있습니다.

길게 누르기, 탭, 두 번 탭, 드래그, 드래그 시작, 드래그 엔드, 드래그 업, 드래그 다운, 왼쪽 드래그, 오른쪽 드래그, 스 와이프, 스 와이프, 스 와이프, 왼쪽으로 스 와이프, 오른쪽으로 스 와이프, 변형, 변형 시작, 변형, 회전, 핀치, 핀치, 핀치 아웃, 터치 (제스처 감지 시작) , 놓기 (제스처 감지 종료)

소스 코드를 읽은 후에 터치 이벤트가 작동하는 방식과 브라우저가 처리 할 수있는 이벤트를 식별하는 방법을 훨씬 더 잘 이해할 수있을 것입니다.

http://eightmedia.github.io/hammer.js/

---

엄청난 수의 브라우저에서 이벤트 순서를 자세히 설명 하는 정말 훌륭한 리소스 https://patrickhlauke.github.io/touch/tests/results/ 가 있습니다. 또한 정기적으로 업데이트되는 것으로 보입니다 (2016 년 9 월에 2016 년 8 월에 마지막으로 업데이트 됨).

요지는 본질적으로 모든 것이 트리거 mouseover및 관련 이벤트를 유발 한다는 것입니다 . 대부분은 또한 터치 이벤트를 트리거하는데, 이는 일반적으로 이전에 완료 (도달 touchend) mouseover한 다음 계속합니다 click(페이지 콘텐츠 변경으로 인해 취소되지 않는 한). 이러한 어색한 예외는 고맙게도 비교적 드뭅니다 (타사 안드로이드 브라우저와 블랙 베리 플레이 북).

링크 된 리소스는 인상적인 수준의 세부 정보로 들어갑니다. 다음은 여러 운영 체제, 장치 및 브라우저 테스트 중 처음 세 가지 샘플입니다.

몇 가지 핵심 사항을 요약하면 다음과 같습니다.

모바일 브라우저

• 나열된 모든 브라우저 mouseover는 첫 번째 탭에서 트리거 됩니다. 일부 Windows Phone 브라우저 만 두 번째 탭에서 트리거합니다.
• 모든 방아쇠 click. 페이지를 변경하면 취소 click할 항목을 지정하지 않습니다 mouseover(대부분 그렇게 생각합니다).
• 대부분의 브라우저는 트리거 mouseover후 touchstart와 touchend. 여기에는 iOS7.1 Safari, Stock Android, Chrome, Opera 및 Android 용 Firefox 및 일부 (모든 Windows 폰 브라우저는 아님)가 포함됩니다.
• 여러 윈도우 폰 브라우저 (모든 Windows 8 / 8.1 일 10 버전) 및 여러 타사 안드로이드 브라우저 (돌고래, Maxathon, UC) 트리거 mouseover 후 touchstart 와 touchend.
• 만 블랙 베리 플레이 북 트리거 mouseover사이 touchstart와touchend
• Opera Mini 및 Puffin (타사 Android 브라우저)에만 touchstart또는 touchend.

데스크탑 브라우저

• 합리적으로 최대 데스크톱 크롬과 오페라의 최신 버전 모바일 대응처럼 행동, touchstart그리고 touchend그 다음 mouseover.
• Firefox 및 Microsoft 브라우저 (IE <= 11 및 Edge의 여러 버전)는 touchstart및 touchend이벤트를 트리거하지 않습니다 .
• 아니 맥 데이터,하지만 아마도 더 마 브라우저는 지원하지 touchstart과 touchend맥 터치 스크린 인터페이스의 부족 주어진.

또한 보조 기술과 결합 된 브라우저에는 엄청난 양의 데이터가 있습니다.

---

다음은 Android 4.3의 터치 및 마우스 이벤트에 대한 최근 관찰입니다.

Opera, Firefox 및 Chrome이 표준 동작을하는 것 같습니다.

1. 스 와이프시 (touchstart-touchmove-touchend) :

   1. 마우스 이벤트 (마우스 오버 제외)가 발생하지 않습니다.
   2. Mouseover fires only if touchstart and touchend occurs on the same element. (touchstart-touchmove-touchend-mouseover)
   3. If default is prevented on touchstart: the default swipe behavior does not work. no changes occur regarding mouse event firing.

2. On Tap(touchstart-touchend):

   1. All mouse events mouseover-mousemove-mousedown-mouseup-click fire after a delay
   2. If default is prevented on touchstart: only mouseover fires.

Android default browser has some non-standard behaviors:

1. Mouseover fires before touchstart which means mouseover always fires.
2. All mouse events fire on Tap, even if the default is prevented on touchstart.

---

Yes you can start a timer attouchstart and end it on touchend and make your choices from there.

또한 당신은 만들 수 있습니다 ... 스 와이프, 내 트리거링 touchmove당신은 "손가락"의 좌표를 얻을 수 있고 touchend트리거 되기 전에 내가 얼마나 여행했는지 볼 수 있습니다.

터치 이벤트 라이브러리를 사용하는 것보다 더 간단한 방법이 있는지는 모르겠지만 간단한 '탭', '두 번 탭', '스 와이프'이벤트를 매우 쉽게 작성할 수 있다고 생각합니다.

참고 URL : https://stackoverflow.com/questions/14486804/understanding-touch-events