HTML5 タッチイベントの進化 タップイベントの紹介_html5 チュートリアル スキル

タッチ イベントはモバイル ブラウザーに特有の HTML5 イベントです。クリック イベントは PC やモバイル端末でよく使用されますが、モバイル端末では 300 ミリ秒の遅延が発生します。この 300 ミリ秒の遅延は、ダブル クリックを判断するために発生します。クリック イベントのみが、後続のアクションが発生しないようにデフォルトの待機時間が経過するまでトリガーされないため、長押しします。そのため、タッチ イベントの応答が速くなり、エクスペリエンスが向上します。

タッチイベントの種類:

タッチに関連した状態変化を区別するために、複数の種類のタッチイベントが存在します。現在のイベントのタイプは、タッチ イベントの <font face="NSimsun">TouchEvent.type</font> 属性を調べることで判断できます。

注: 多くの場合、タッチ イベントとマウス イベントは同時にトリガーされます (目的は、タッチ デバイス用に最適化されていないコードでもタッチ デバイスで正常に動作できるようにすることです)デバイス）。タッチ イベントを使用する場合は、<font face="NSimsun">event.preventDefault()</font> を呼び出して、マウス イベントがトリガーされるのを防ぐことができます。

標準タッチイベント

テーブル>

オブジェクトのプロパティをタッチします

イベント名

説明

タッチ配列が含まれます

タッチスタート

ユーザーがタッチ サーフェス上にタッチ ポイントを置いたときに発生します。イベント <font face="NSimsun">要素</font> のターゲットは、次のターゲット <font face="NSimsun">要素</font> になります。タッチ位置コード>

はい

タッチムーブ

事件名称	描述	包含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">要素</font>のターゲットは、この <font face="NSimsun"> touchmove </font> に対応します。 > イベント <font face="NSimsun">touchstart イベント</font> のターゲットは <font face="NSimsun">要素</font> と同じです。コード>、 <font face="NSimsun">touchmove</font> イベントがトリガーされても、タッチ ポイントが <font face="NSimsun">要素の外に移動しています。 </font>。

はい

タッチエンド

ユーザーによってタッチ ポイントがタッチ表面から離れたとき (ユーザーがタッチ表面から指を離したとき) に発生します。 接触がタッチ面の境界外に移動したときにもトリガーされます。たとえば、ユーザーが画面の端から指を抜きます。 タッチ プレーンから削除されたタッチは、TouchList で定義されている changedTouches 属性で確認できます。

はい

タッチエンター

連絡先が <font face="NSimsun">要素</font>に入るときにトリガーされます。 このイベントにはバブリング処理はありません。

はい

タッチリーブ

連絡先が <font face="NSimsun">要素</font>を離れるときに発生します。 このイベントにはバブリング処理はありません。

はい

タッチキャンセル

何らかの理由で連絡が中断されたときに発生します。次のようないくつかの理由が考えられます (具体的な理由はデバイスやブラウザによって異なります):

• イベントによりタッチがキャンセルされました。たとえば、モーダル ポップアップ ボックスによってタッチ プロセスが中断されました。
• タッチ ポイントがドキュメント ウィンドウから出て、ブラウザのインターフェイス要素、プラグイン、またはその他の外部コンテンツ領域に入ります。
• ユーザーが生成したタッチ ポイントの数がデバイスでサポートされている数を超えた場合、<font face="NSimsun">TouchList</font> code> ="NSimsun">タッチ オブジェクトがキャンセルされます。

はい

。 が含まれます。 。 テーブル>

<font face="NSimsun">Touch.identifier</font>

タッチ面と接触している点を一意に識別する値を返します。この値は、この指 (またはスタイラスなど) がタッチ面を離れるまでトリガーされるすべてのイベントにわたって一貫しています。

<font face="NSimsun">Touch.screenX</font>

画面の左端を基準としたタッチ ポイントの X 座標。読み取り専用プロパティ。

<font face="NSimsun">タッチスクリーン Y</font>

画面の上端を基準としたタッチ ポイントの Y 座標。読み取り専用プロパティ。

<font face="NSimsun">Touch.clientX</font>

表示されているビューポートの左端を基準としたタッチ ポイントの X 座標には、読み取り専用のプロパティが含まれません。

<font face="NSimsun">Touch.clientY</font>

表示されているビューポートの上端を基準としたタッチ ポイントの Y 座標には、読み取り専用のプロパティが含まれません。

<font face="NSimsun">Touch.pageX</font>

HTML ドキュメントの左端を基準としたタッチ ポイントの X 座標。水平スクロールがある場合offset、この値には水平スクロール オフセット読み取り専用プロパティ

<font face="NSimsun">Touch.pageY</font>

HTML ドキュメントの上端を基準としたタッチ ポイントの Y 座標。<font face="NSimsun">水平スクロール オフセットがある場合、この値には垂直スクロール オフセットが含まれます。</font> 。<strong>読み取り専用属性。</strong>

<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">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 は、3 つの対話パターンすべてが非常に似ているため、これは偶然ではありません。 start-move-stop で記述できます。

そうは言っても、クリックは 300 ミリ秒の遅延を伴う touchstart-touchmove-touchend プロセスを通過する必要があるため、タップとは同じポイントを短時間タッチすることを意味します。

カプセル化されたタップイベントとロングタップイベント

XML/HTML コードコンテンツをクリップボードにコピー

1. (function() {
2. var タッチスタート、タッチエンド;    
3. if (typeof(window.ontouchstart) != '未定義') {
4. タッチスタート = 'タッチスタート';    
5. タッチエンド = 'タッチエンド';    
6. TOUCHMOVE='タッチムーブ';    
8. } else if (typeof(window.onmspointerdown) != '未定義') {
9. TOUCHSTART = 'MSPointerDown';    
10. タッチエンド = 'MSPointerUp';    
11. TOUCHMOVE='MSPointerMove';    
12. } else {
13. タッチスタート = 'マウスダウン';    
14. タッチエンド = 'マウスアップ';    
15. TOUCHMOVE = 'mousemove';    
16. }
17. 関数 NodeTouch(ノード) {
18. this._node = ノード;    
19. }
20. function tap(node,callback,scope) {
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(scope, arguments);    
32. }
33. });    
34. }
35. 関数 longTap(node,callback,scope) {
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(scope, arguments);    
55. }
56. });    
57. }
58. NodeTouch.prototype.on = function(evt, callback, scope) {
59. var scopeObj;    
60. var x,y;    
61. if (!scope) {
62. scopeObj = this._node;    
63. } else {
64. スコープscopeObj = スコープ;    
65. }
66. if (evt === 'タップ') {
67. tap(this._node,callback,scope);    
68. } else if(evt === 'ロングタップ'){
69. longTap(this._node,callback,scope);    
70. } else {
71. this._node.addEventListener(evt, function() {
72. callback.apply(scope, arguments);    
73. });    
74. }
75. これを返します。    
76. }
77. window.$ = 関数(セレクター) {
78. var node = document.querySelector(selector);    
79. if (ノード) {
80. return new NodeTouch(ノード);    
81. } else {
82. null を返します。    
83. }
84. }
85. })();    
86. var box=$("#box");    
87. box.on("longtap",function(){
88. console.log("你已经长按了");    
89. }、ボックス)

このセクション以上の HTML5 タッチ イベントの実行タップ イベント メディアは、大家のすべてのコンテンツを小分けに共有することを希望し、大家一参照、また大家多数の脚本のサポートを希望します。

翻訳地址：

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