HTML5 터치 이벤트 진화 탭 이벤트 소개_html5 튜토리얼 기술

터치 이벤트는 모바일 브라우저 고유의 HTML5 이벤트입니다. 클릭 이벤트는 PC 및 모바일 단말기에서 더 일반적이지만 모바일 단말기에서는 300ms 지연이 발생하며 이는 더블 클릭을 판단하는 데 영향을 미칩니다. 클릭 이벤트는 후속 작업이 발생하지 않도록 기본 대기 시간이 경과할 때까지 트리거되지 않기 때문입니다. 따라서 터치 이벤트 응답이 더 빠르고 경험이 더 좋습니다.

터치 이벤트 종류 :

터치 관련 상태 변화를 구별하기 위해 여러 유형의 터치 이벤트가 있습니다. 터치 이벤트의 <font face="NSimsun">TouchEvent.type</font> 속성을 ​​검사하여 현재 이벤트 유형이 무엇인지 확인할 수 있습니다.

참고: 많은 경우 터치 이벤트와 마우스 이벤트가 동시에 발생합니다. (목적은 터치 장치에 최적화되지 않은 코드가 터치 시에도 정상적으로 작동하도록 허용하는 것입니다. 장치). 터치 이벤트를 사용하는 경우 <font face="NSimsun">event.preventDefault()</font>을 호출하여 마우스 이벤트가 실행되는 것을 방지할 수 있습니다.

표준 터치 이벤트

이벤트 이름 설명 터치 배열 포함

터치스타트

사용자가 터치 표면에 터치 포인트를 놓으면 실행됩니다. 이벤트 <fontface>element</fontface>의 대상은 다음의 대상 <fontface>element</fontface>가 됩니다. 터치 위치 코드> 예

터치무브

事件名称	描述	包含touches数组
touchstart	当用户在触摸平面上放置了一个触点时触发。事件的目标 <font face="NSimsun">element</font> 将是触点位置上的那个目标 <font face="NSimsun">element</font>	是
touchmove	当用户在触摸平面上移动触点时触发。 事件的目标 <font face="NSimsun">element</font> 和这个<font face="NSimsun"> touchmove </font>事件对应的 <font face="NSimsun">touchstart 事件的目标</font> <font face="NSimsun">element</font> 相同， 哪怕当 <font face="NSimsun">touchmove</font> 事件触发时，触点已经移出了该 <font face="NSimsun">element</font> 。	是
touchend	当一个触点被用户从触摸平面上移除（当用户将一个手指离开触摸平面）时触发。 当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。 已经被从触摸平面上移除的触点，可以在 changedTouches 属性定义的 TouchList 中找到。	是
touchenter	当触点进入某个 <font face="NSimsun">element</font> 时触发。此事件没有冒泡过程。	是
touchleave	当触点离开某个 <font face="NSimsun">element</font> 时触发。此事件没有冒泡过程。	是
touchcancel	当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）： 由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。 触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。 当用户产生的触点个数超过了设备支持的个数，从而导致 <font face="NSimsun">TouchList</font> 中最早的 <font face="NSimsun">Touch</font> 对象被取消。	是

사용자가 터치 표면의 접점을 움직일 때 실행됩니다. 이벤트 <font face="NSimsun">element</font>의 대상은 이 <font face="NSimsun"> touchmove </font>에 해당합니다. > 이벤트 <font face="NSimsun">touchstart 이벤트</font>의 대상은 <font face="NSimsun">요소</font>와 동일합니다. 코드> , <code><fontface>touchmove</fontface> 이벤트가 발생하더라도 터치 포인트가 <fontface>요소 밖으로 이동했습니다. </fontface>. 예

터치엔드

사용자가 터치 표면에서 터치 포인트를 제거할 때(사용자가 터치 표면에서 손가락을 떼면) 실행됩니다. 또한 접촉이 터치 평면의 경계 밖으로 이동할 때도 트리거됩니다. 예를 들어, 사용자가 화면 가장자리에서 손가락을 뺍니다. 터치 플레인에서 제거된 터치는 TouchList에 정의된 changedTouches 속성에서 찾을 수 있습니다. 예

터치센터

연락처가 <fontface>요소</fontface>에 입력되면 트리거됩니다. 본 이벤트에는 버블링 과정이 없습니다. 예

터치리브

연락처가 <fontface>요소</fontface>를 떠날 때 시작됩니다. 본 이벤트에는 버블링 과정이 없습니다. 예

터치취소

어떤 이유로든 연락이 중단되면 실행됩니다. 다음과 같은 여러 가지 이유가 있을 수 있습니다(구체적인 이유는 기기 및 브라우저에 따라 다름).

• 이벤트로 인해 터치가 취소되었습니다. 예를 들어 모달 팝업 상자로 인해 터치 프로세스가 중단되었습니다.
• 터치 포인트는 문서 창을 떠나 브라우저의 인터페이스 요소, 플러그인 또는 기타 외부 콘텐츠 영역으로 들어갑니다.
• 사용자가 생성한 터치 포인트 수가 기기에서 지원하는 수를 초과하여 <fontface>TouchList에서 가장 빠른 <code><font> code> ="NSimsun">Touch</font> 개체가 취소됩니다.

예

터치 개체 속성

<fontface>Touch.identifier</fontface> 터치 평면과 접촉하는 지점을 고유하게 식별하는 값을 반환합니다. 이 값은 터치 평면을 떠날 때까지 이 손가락(또는 스타일러스 등)에 의해 트리거된 모든 이벤트에서 일관되게 유지됩니다. <fontface>Touch.screenX</fontface> 화면 왼쪽 가장자리를 기준으로 한 터치 포인트의 X 좌표입니다. 읽기 전용 속성입니다. <fontface>Touch.screenY</fontface> 화면 상단 가장자리를 기준으로 한 터치 포인트의 Y 좌표입니다. 읽기 전용 속성입니다. <fontface>Touch.clientX</fontface> 표시되는 뷰포트의 왼쪽 가장자리를 기준으로 한 터치 지점의 X 좌표입니다. 읽기 전용 속성 <fontface>Touch.clientY</fontface> 표시되는 뷰포트의 상단 가장자리를 기준으로 한 터치 지점의 Y 좌표입니다. 읽기 전용 속성 <fontface>Touch.pageX</fontface> HTML 문서의 왼쪽 가장자리를 기준으로 한 터치 포인트의 X 좌표입니다. 가로 방향스크롤offset, 이 값에는 가로 스크롤 오프셋이 포함됩니다. 읽기 전용 속성. <fontface>Touch.pageY</fontface> HTML 문서의 상단 가장자리를 기준으로 한 터치 지점의 Y 좌표입니다. <fontface>가로 스크롤 오프셋이 있는 경우 이 값에는 세로 스크롤 오프셋이 포함됩니다. </fontface>. 읽기 전용 속성. <fontface>Touch.radiusX</fontface> 사용자와 터치 표면 사이의 접촉 표면을 둘러쌀 수 있는 가장 작은 타원의 가로축(X축) 반경입니다. 이 값의 단위는 <fontface>과 같습니다. screenX.</fontface>읽기 전용 속성. <code><fontface>Touch.force</fontface> 손가락이 터치 표면을 누르는 압력의 양으로, 0.0(압력 없음)부터 1.0(최대 압력)까지의 부동 소수점 숫자입니다. 읽기 전용 속성입니다. <code><fontface>Touch.radiusY</fontface> 사용자와 터치면 사이의 접촉면을 둘러쌀 수 있는 가장 작은 타원의 세로축(Y축) 반경입니다. 이 값의 단위는 <fontface>과 같습니다. screenY. </fontface>읽기 전용 속성. <code><code><fontface>Touch.target</fontface>

<font face="NSimsun">Touch.identifier</font>	返回一个可以唯一地识别和触摸平面接触的点的值. 这个值在这根手指（或触摸笔等）所引发的所有事件中保持一致, 直到它离开触摸平面.
<font face="NSimsun">Touch.screenX</font>	触点相对于屏幕左边沿的的X坐标. 只读属性.
<font face="NSimsun">Touch.screenY</font>	触点相对于屏幕上边沿的的Y坐标. 只读属性.
<font face="NSimsun">Touch.clientX</font>	触点相对于可见视区左边沿的的X坐标. 不包括任何滚动偏移. 只读属性.
<font face="NSimsun">Touch.clientY</font>	触点相对于可见视区上边沿的的Y坐标. 不包括任何滚动偏移. 只读属性.
<font face="NSimsun">Touch.pageX</font>	触点相对于HTML文档左边沿的的X坐标. 当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移. 只读属性.
<font face="NSimsun">Touch.pageY</font>	触点相对于HTML文档上边沿的的Y坐标. <font face="NSimsun">当存在水平滚动的偏移时, 这个值包含了垂直滚动的偏移</font>. 只读属性.
<font face="NSimsun">Touch.radiusX</font>	能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径. 这个值的单位和<font face="NSimsun"> screenX 相同. </font>只读属性.
<code><font face="NSimsun">Touch.force</font>	手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数. 只读属性.
<code><font face="NSimsun">Touch.radiusY</font>	能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和<font face="NSimsun"> screenY 相同. </font>只读属性.
<code><code><font face="NSimsun">Touch.target</font>	当这个触点最开始被跟踪时(在 <font face="NSimsun">touchstart</font> 事件中), 触点位于的HTML元素. 哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 <font face="NSimsun">window</font> 或 <font face="NSimsun">document</font> 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.

이 터치 지점이 처음 추적되면(<font face="NSimsun">touchstart</font> 이벤트에서) 터치 지점이 HTML 요소에 위치합니다. 포인트 이동 과정에서 터치 포인트의 위치가 이 요소의 유효 상호 작용 영역을 벗어났습니다.

또는 이 요소가 문서에서 제거되었습니다. 터치 프로세스 중에 이 요소가 제거되면 이 이벤트는 여전히 해당 요소를 가리키지만 이 이벤트는 더 이상 창 또는 <font face="NSimsun">문서</font> 개체.

따라서 터치 프로세스 중에 제거될 수 있는 요소가 있는 경우 가장 좋은 방법은 터치 이벤트 리스너를 요소 자체에 바인딩하여 해당 요소가 부모 요소에서 제거되는 것을 방지하는 것입니다. 읽기 전용 속성입니다.

IE指针事件

事件名称	描述（在触摸设备上）
MSPointerDown	触摸开始
MSPointerMove	接触点移动
MSPointerUp	触摸结束
MSPointerOver	触摸点移动到元素内，相当于mouseover
MSPointerOut	触摸点离开元素，相当于mouseout

IE10의 터치 이벤트

MSPointerEvent 속성

属性	描述
hwTimestamp	创建事件的时间（ms）
isPrimary	标识该指针是不是主指针
pointerId	指针的唯一ID（类似于触摸事件的标识符）
pointerType	一个整数，标识了该事件来自鼠标、手写笔还是手指
pressure	笔的压力，0-255，只有手写笔输入时才可用
rotation	0-359的整数，光标的旋转度（如果支持的话）
tiltX/tiltY	手写笔的倾斜度，只有用手写笔输入时才支持

동등한 이벤트

鼠标	触摸	键盘
mousedown	touchstart	keydown
mousemove	touchmove	keydown
mouseup	touchend	keyup
mouseover		focus

분명히 터치 작업 순서: touchstart-touchmove-touchend와 마우스 순서: mousedown-mousemove-mouseup 및 키보드 순서: keydown-keypress-keyup은 세 가지 상호 작용 패턴이 모두 매우 유사하므로 이는 우연이 아닙니다. 시작-이동-정지로 설명할 수 있습니다.

그런데 클릭은 300ms의 지연을 두고 터치시작-터치이동-터치엔드 과정을 거쳐야 하므로 탭 이벤트가 필요한 것은 짧은 시간 동안 같은 지점을 터치한다는 의미입니다.

캡슐화된 탭 및 롱탭 이벤트

XML/HTML 코드클립보드에 콘텐츠 복사

1. (function() {    
2.     var TOUCHSTART, TOUCHEND;    
3.     if (typeof(window.ontouchstart) != '정의되지 않음') {    
4.         터치시작 = '터치시작';    
5.         터치END = '터치엔드';    
6.         터치MOVE='터치이동';    
7.      
8.     } else if (typeof(window.onmspointerdown) != '정의되지 않음') {    
9.         터치시작 = 'MSPointerDown';    
10.         터치 = 'MSPointerUp';    
11.         터치MOVE='MSPointerMove';    
12.     } 그밖에 {    
13.         터치시작 = '마우스다운';    
14.         터치 = '마우스업';    
15.         터치이동 = '마우스이동';    
16.     }    
17.     기능 NodeTouch(노드) {    
18.         this._node = node;    
19.     }    
20.     함수 탭(노드,콜백,범위) {    
21.         node.addEventListener(TOUCHSTART, function(e) {    
22.             x = e.touches[0].pageX;    
23.             y = e.touches[0].pageY;    
24.         });    
25.         node.addEventListener(TOUCHEND, function(e) {    
26.             e.stopPropagation();    
27.             e.preventDefault();    
28.             var curx = e.changedTouches[0].pageX;    
29.             var cury = e.changedTouches[0].pageY;    
30.            if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {    
31.                 callback.apply(범위, 인수);    
32.             }    
33.         });    
34.     }    
35.     기능 longTap(노드,콜백,범위) {    
36.         var x,y,startTime=0,endTime=0,in_dis=false;    
37.         node.addEventListener(TOUCHSTART, function(e) {    
38.             x = e.touches[0].pageX;    
39.             y = e.touches[0].pageY;    
40.             startTime=(new Date()).getTime();    
41.         });    
42.         node.addEventListener(TOUCHEND, function(e) {    
43.             e.stopPropagation();    
44.             e.preventDefault();    
45.             var curx = e.changedTouches[0].pageX;    
46.             var cury = e.changedTouches[0].pageY;    
47.            if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {    
48.                in_dis=true;    
49.             }그밖에{    
50.                in_dis=false;    
51.             }    
52.             endTime=(new Date()).getTime();    
53.             if (endTime - startTime > 300 && in_dis) {    
54.                 callback.apply(범위, 인수);    
55.             }    
56.         });    
57.     }    
58.     NodeTouch.prototype.on = 함수(evt, 콜백, 범위) {    
59.         var scopeObj;    
60.         var x,y;    
61.         if (!scope) {    
62.             scopeObj = 이._node;    
63.         } 그밖에 {    
64.             scopescopeObj = scope;    
65.         }    
66.         if (이벤트 === '탭') {    
67.             tap(this._node,callback,scope);    
68.         } else if(이벤트 === '길게 탭'){    
69.             longTap(this._node,callback,scope);    
70.         } 그밖에 {    
71.             this._node.addEventListener(evt, function() {    
72.                 callback.apply(범위, 인수);    
73.             });    
74.         }    
75.         이것을 반환하세요.    
76.     }    
77.     window.$ = 함수(선택기) {    
78.         var 노드 = 문서.querySelector(선택기);    
79.         if (노드) {    
80.             새 NodeTouch(노드) 반환;    
81.         } 그밖에 {    
82.             null을 반환합니다.    
83.         }    
84.     }    
85. })();    
86. var box=$("#box");    
87. box.on("longtap",function(){    
88.     console.log("你已经长按了");    
89. },상자)  

원문지址：

http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html