터치 이벤트 이해


80

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

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

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

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

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

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

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

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

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

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

Android 용 Firefoxtouchstart이벤트를 올바르게 실행하고 짧은 탭 실행의 mousedown경우 mouseup, touchendclick그 이후에 실행됩니다.

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

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

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

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

Chrome 베타 는 짧게 탭하는 경우 일반적인 작업을 수행하지만 긴 탭의 mouseup경우 더 이상 이벤트를 실행 하지 않습니다 touchstart. 그 mousedown다음 0.5 초 후에 touchend손가락을 떼면 더 이상 이벤트 가 발생하지 않습니다 . 손가락을 움직이면 이제 Firefox 및 Opera Mobile처럼 작동합니다.

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

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

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

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


1
Tocca.js를 사용해 보셨습니까? gianlucaguarini.github.io/Tocca.js 모든 종류의 장치에서 모든 누락 된 터치 이벤트를 활성화하며 약 1kb
Gianluca Guarini

답변:


26

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

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

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

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

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

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

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


흥미로운 코드는 매우 완전하고 광범위 해 보입니다. 분석하는 데 시간이 좀 걸릴 수 있습니다.
MaxArt 2013 년

9

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

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

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

여기에 이미지 설명 입력

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

모바일 브라우저

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

데스크탑 브라우저

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

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


3

예, 타이머를 시작 touchstart하고 끝낼 touchend수 있으며 거기에서 선택할 수 있습니다.

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

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


1
그것에 대해 생각하고 위의 브라우저의 동작을 고려하면 결코 쉽지 않다는 것을 인정할 것입니다. 예를 들어 요소를 터치 한 다음 손가락을 요소 외부로 이동 한 다음 손가락을 떼면 유효한 "탭"은 아니지만 실행되지 않으므로 감지 할 수 없습니다 touchleave.
MaxArt 2013 년

당신은 좋은 지적을하지만; 적절한 코딩 e.target을 통해 터치 스타트에서 요소 (내가 믿는다)를 캡처하면 터치 엔드의 요소와 동일합니까? 아니라면 유효한 탭이 아니라 함정입니다. 라이브러리를 코딩하는 것이 쉬울 것이라고 말하는 것은 아니지만 실제로 "어렵다"는 것은 아닙니다. "중간"등급을 매길 것입니다 + 도전적이지 않고 우리를 stackoverflow xD에서 반환하게 만드는 경우 재미는 무엇입니까
Alexandru Calin

라이브러리를 코딩하는 것은 나에게 문제가되지 않을 것입니다. 저는 그것이 도전적이고 만족스럽고 다소 재미 있습니다. 그러나 귀하의 의견은 해결책에 대한 힌트 일 뿐이지 만 어떻게 구축합니까? touchstart이벤트 에 대한 정보를 어디에 보관 합니까? 두 번째 touchstart이벤트가 발생 하면 어떻게 됩니까 (멀티 터치 디스플레이)? 긴 탭을 어떻게 처리합니까? 를 사용 setTimeout하지만 그 동안 손가락이 요소를 벗어나면 어떻게됩니까? 터치 이벤트가 발생하지 않으면 어떻게 감지합니까? 그리고 등등 ... 당연히 시도해 볼게요.하지만 터치 이벤트에 대한 깊은 분석을 찾고 싶었어요.
MaxArt

touchend 이벤트가 발생하지 않으면 두 번째 touchstart 이벤트를 실행할 수 없으므로 동시에 두 번 탭할 수 없으므로 문제가 없습니다. 당신은 변수의 정보를 유지하고 touchend에서 다시 설정할 것
Alexandru 칼린

틀 렸습니다. 첫 번째 문제 가 발생 하기 전에 두 번째 시간을 가질 있습니다 . 더욱이, 당신의 대답에 대해 다시 생각하면 도움이되지 않는다는 결론으로 ​​이어집니다. 왜냐하면 이벤트 의 속성은 손가락이 요소 밖으로 움직여도 항상 터치가 시작된 요소와 같기 때문입니다 ! touchstarttouchendtargettouchend
MaxArt 2013 년

3

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

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

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

    1. 마우스 이벤트 (마우스 오버 제외)가 발생하지 않습니다.
    2. Mouseover는 touchstart 및 touchend가 동일한 요소에서 발생하는 경우에만 실행됩니다. (touchstart-touchmove-touchend-mouseover)
    3. 터치 스타트에서 기본값이 금지 된 경우 : 기본 스 와이프 동작이 작동하지 않습니다. 마우스 이벤트 발생과 관련된 변경 사항이 없습니다.
  2. 탭시 (touchstart-touchend) :

    1. 지연 후 모든 마우스 이벤트 mouseover-mousemove-mousedown-mouseup-click 실행
    2. 터치 스타트에서 기본값이 금지 된 경우 : 마우스 오버 만 실행됩니다.

Android 기본 브라우저에는 몇 가지 비표준 동작이 있습니다 .

  1. Mouseover는 touchstart 전에 실행되며 이는 mouseover가 항상 실행됨을 의미합니다.
  2. 터치 스타트에서 기본값이 금지 된 경우에도 모든 마우스 이벤트는 Tap에서 발생합니다.
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.