touch.js-일반 애플리케이션 작업

기본 이벤트:

touchstart //손가락이 화면에 닿기만 하면 트리거됩니다.

touchmove //화면에서 손가락이 움직일 때 트리거됩니다.

touchend //손가락이 화면에서 멀어지면 트리거됩니다.

touchcancel //시스템에 의해 터치 프로세스가 취소될 때 트리거됨(드물게 사용됨)

1. 이벤트 바인딩(일반적으로 사용됨, 중요)

touch.on( 요소, 유형, 콜백 );

기능 설명 : 이벤트 바인딩 방식으로, 매개변수를 기준으로 이벤트 바인딩과 이벤트 프록시를 구분합니다.

매개변수 설명 :

매개변수	유형	설명하다
요소	요소 또는 문자열	요소 객체, 선택기
종류	끈	이벤트 유형(주로 제스처 이벤트), 여러 이벤트를 공백으로 구분하여 허용 가능, 기본 이벤트의 투명한 전송 지원
콜백	기능	이벤트 처리 함수, 제거 함수 및 바인딩 함수는 동일한 참조를 가져야 합니다.

일부 제스처 이벤트

분류	매개변수	설명하다
줌	핀치스타트	확대/축소 동작 시작점
	핀치	확대/축소 동작 끝점
	꼬집다	확대/축소 동작
	핀친	수축
	핀치아웃	크게 하다
회전하다	왼쪽으로 회전	왼쪽으로 회전
	오른쪽으로 회전	오른쪽으로 회전
	회전하다	회전하다
미끄러지 다	스와이프스타트	슬라이딩 동작의 시작점
	스와이프	슬라이딩
	휘핑 오리	스와이프 동작 끝점
	왼쪽으로 밀으시오	왼쪽으로 밀으시오
	오른쪽으로 스와이프	오른쪽으로 스와이프
	스와이프업	위로 슬라이드
	아래로 쓸어 내려라	아래로 슬라이드
	강타	미끄러지 다
시작하려면 드래그하세요.	드래그 시작	드래그 화면
견인	견인	드래그 동작
드래그 종료	적재	드래그 화면
견인	견인	드래그 동작
누르다	잡고 있다	화면을 길게 누르세요
수도꼭지	수도꼭지	클릭 화면
	두 번 탭	화면을 두 번 탭하세요.

 

일부 이벤트 처리 기능

속성	설명하다
원산지이벤트	이벤트를 트리거하는 네이티브 객체
유형	이벤트 이름
회전	회전 각도
규모	스케일링 비율
방향	작업의 방향 속성
손가락 개수	수행된 제스처 수
위치	관련 위치 정보, 다양한 작업으로 인해 다양한 위치 정보 생성
거리	스와이프 클래스의 두 지점 간 변위
거리X, x	제스처 이벤트의 x 방향 변위 값으로, 왼쪽으로 이동할 때 음수입니다.
거리Y, y	제스처 이벤트의 y 방향 변위 값으로 위쪽으로 이동할 때 음수입니다.
각도	회전 이벤트가 트리거될 때 회전 각도
지속	touchstart와 touchend 사이의 타임스탬프
요인	스와이프 이벤트 가속 요소
시작회전	요소의 터치시작이 트리거될 때 호출되는 한 손가락 회전 방법을 시작합니다.

소규모 헬기:

 

공공의

1. <script src= "http://touch.code.baidu.com/touch-0.2.14.min.js"></script>  

1. <본문>  
2. <div id= "놀이 영역">  
3.   <img id= "target" draggable= "false" src= "img/cloud.png"  class= "show" >  
4. </div>  
5. </body>  

》회전 회전

》스위퍼

 

》드래그

 

》클릭 탭, 더블 클릭 더블 탭, 길게 누르기

touch.on('#target', 'hold tap doubletap', function(ev){ }//여러 동작은 동일한 효과를 갖습니다. 공백으로 구분하세요.

이벤트(마우스 이벤트 포함)는 다음 순서로 발생합니다. 

(1) 터치스타트

(2)마우스오버

(3)마우스 이동(1회)

(4)마우스다운

(5)마우스업

(6)클릭

(7)터치엔드