Pengenalan kepada evolusi acara sentuh HTML5 ketik kemahiran tutorial event_html5

Acara sentuh ialah acara HTML5 yang unik untuk penyemak imbas mudah alih Walaupun acara klik lebih biasa pada PC dan terminal mudah alih, akan ada kelewatan 300ms pada terminal mudah alih, yang menjejaskan pengalaman pengguna. Kelewatan 300ms datang daripada menilai klik dua kali dan tekan lama, kerana hanya Peristiwa klik tidak akan dicetuskan sehingga masa menunggu lalai telah berlalu untuk memastikan tiada tindakan seterusnya berlaku. Jadi tindak balas acara sentuh lebih pantas dan pengalaman lebih baik.

Jenis acara sentuhan:

Untuk membezakan perubahan keadaan berkaitan sentuhan, terdapat berbilang jenis acara sentuhan. Anda boleh menentukan jenis acara semasa dengan memeriksa atribut <font face="NSimsun">TouchEvent.type</font> acara sentuh.

Nota: Dalam banyak kes, peristiwa sentuhan dan peristiwa tetikus akan dicetuskan pada masa yang sama (tujuannya adalah untuk membenarkan kod yang tidak dioptimumkan untuk peranti sentuh masih berfungsi seperti biasa semasa sentuhan peranti). Jika anda menggunakan acara sentuh, anda boleh memanggil <font face="NSimsun">event.preventDefault()</font> untuk mengelakkan peristiwa tetikus daripada dicetuskan.

Acara sentuhan standard

Nama acara

Penerangan

Mengandungi tatasusunan sentuhan

touchstart

Dicetuskan apabila pengguna meletakkan titik sentuh pada permukaan sentuh. Sasaran <font face="NSimsun">elemen</font> acara akan menjadi <font face="NSimsun">elemen</font> sasaran di kod lokasi sentuh>

Ya

touchmove

事件名称	描述	包含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> 对象被取消。	是

Dipecat apabila pengguna mengalihkan titik sentuhan pada permukaan sentuh. Sasaran acara <font face="NSimsun">elemen</font> sepadan dengan <font face="NSimsun"> touchmove </font>ini > acara Sasaran <font face="NSimsun">touchstart event</font> adalah sama dengan <font face="NSimsun">elemen</font> kod> , Walaupun apabila peristiwa <font face="NSimsun">touchmove</font> dicetuskan, titik sentuh telah dialih keluar daripada elemen <font face="NSimsun"> </font>.

Ya

touchend

Dipecat apabila titik sentuh dikeluarkan dari permukaan sentuh oleh pengguna (apabila pengguna mengangkat jari dari permukaan sentuh). Juga dicetuskan apabila sesentuh bergerak di luar sempadan satah sentuh. Sebagai contoh, pengguna menarik jari mereka keluar dari tepi skrin. Sentuhan yang telah dialih keluar daripada satah sentuh boleh didapati dalam atribut changedTouches yang ditakrifkan dalam TouchList .

Ya

touchenter

Dicetuskan apabila kenalan memasuki <font face="NSimsun">elemen</font>. Acara ini tidak mempunyai proses menggelegak.

Ya

touchleave

Dipecat apabila kenalan meninggalkan <font face="NSimsun">elemen</font>. Acara ini tidak mempunyai proses menggelegak.

Ya

touchcancel

Dipecat apabila kenalan diganggu atas sebab tertentu. Terdapat beberapa sebab yang mungkin seperti berikut (sebab khusus berbeza mengikut peranti dan penyemak imbas):

• Sentuhan telah dibatalkan disebabkan oleh peristiwa: contohnya, proses sentuhan telah diganggu oleh kotak pop timbul modal.
• Titik sentuh meninggalkan tetingkap dokumen dan memasuki elemen antara muka penyemak imbas, pemalam atau kawasan kandungan luaran yang lain.
• Apabila bilangan titik sentuh yang dijana oleh pengguna melebihi bilangan yang disokong oleh peranti, menghasilkan <font face="NSimsun">TouchList</font> code> ="NSimsun">Touch objek dibatalkan.

Ya

Sifat objek sentuh

).

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

Mengembalikan nilai yang secara unik mengenal pasti titik yang bersentuhan dengan satah sentuh Nilai ini kekal konsisten merentas semua peristiwa yang dicetuskan oleh jari ini (atau stylus, dsb.) sehingga ia meninggalkan satah sentuh.

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

Koordinat X titik sentuh berbanding dengan tepi kiri skrin Sifat baca sahaja.

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

Koordinat Y bagi titik sentuh berbanding dengan tepi atas skrin Sifat baca sahaja.

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

Koordinat X bagi titik sentuh berbanding dengan tepi kiri port pandangan yang boleh dilihat

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

Koordinat Y bagi titik sentuh berbanding tepi atas port pandangan yang boleh dilihat tidak termasuk sebarang pengimbangan tatal Sifat baca sahaja.

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

Koordinat X bagi titik sentuh berbanding dengan tepi kiri dokumen HTML Apabila terdapat mendatarscrollingoffset, Nilai ini mengandungi offset tatal mendatar</code.></font> <strong>Harta baca sahaja.</strong> </td> </tr> <tr> <td><code><font face="NSimsun">Touch.pageY</font>

Koordinat Y bagi titik sentuh relatif kepada tepi atas dokumen HTML <font face="NSimsun">Apabila terdapat pengimbangan skrol mendatar, nilai ini termasuk pengimbangan skrol menegak</font> <strong>Atribut baca sahaja.</strong>

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

Jejari paksi mendatar (paksi-X) elips terkecil yang boleh menutup permukaan sentuhan antara pengguna dan permukaan sentuh Unit nilai ini adalah sama dengan <font face="NSimsun"> screenX. </font>Atribut baca sahaja.

<code><font face="NSimsun">Touch.force</font>

Jumlah tekanan yang ditekan oleh jari pada permukaan sentuh, nombor titik terapung daripada 0.0 (tiada tekanan) kepada 1.0 (tekanan maksimum Sifat baca sahaja.

<code><font face="NSimsun">Touch.radiusY</font>

Jejari paksi menegak (paksi-Y) elips terkecil yang boleh menutup permukaan sentuhan antara pengguna dan permukaan sentuh Unit nilai ini adalah sama dengan <font face="NSimsun"> screenY. </font>Atribut baca sahaja.

<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> 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.

Apabila titik sentuh ini pada mulanya dijejaki (dalam acara <font face="NSimsun">touchstart</font>), titik sentuh terletak dalam elemen HTML Walaupun sentuhan itu titik bergerak Semasa proses, kedudukan titik sentuh telah meninggalkan kawasan interaksi berkesan elemen ini,

Atau elemen ini telah dialih keluar daripada dokumen Perlu diingat bahawa jika elemen ini dialih keluar semasa proses sentuhan, acara ini akan tetap menghalakannya, tetapi acara ini tidak lagi akan menggelembung ke tetingkap atau objek <font face="NSimsun">dokumen</font>.

Oleh itu, jika terdapat elemen yang mungkin dialih keluar semasa proses sentuhan, amalan terbaik ialah mengikat pendengar peristiwa sentuhan kepada elemen itu sendiri untuk mengelakkan elemen itu daripada dialih keluar daripada elemen induknya Satu peristiwa telah dikesan menggelegak daripada elemen ini. Atribut baca sahaja.

IE指针事件

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

Acara sentuh dalam IE10

Harta MSPointerEvent

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

Acara yang setara

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

Jelas sekali, urutan tindakan sentuh: touchstart-touchmove-touchend dan jujukan tetikus: mousedown-mousemove-mouseup dan urutan papan kekunci: keydown-keypress-keyup adalah sangat serupa. Ini bukan kebetulan, kerana ketiga-tiga corak interaksi boleh diterangkan untuk mula-gerak-henti.

Setelah berkata demikian, klik perlu melalui proses touchstart-touchmove-touchend, dengan kelewatan 300ms, jadi acara ketik diperlukan Ketik bermakna menyentuh titik yang sama untuk masa yang singkat.

Acara ketik dan ketik panjang yang dirangkumkan

Kod XML/HTMLSalin kandungan ke papan keratan

1. (fungsi() {    
2.     var SENTUH MULA, SENTUH;    
3.     jika (typeof(window.ontouchstart) != 'undefined') {    
4.         SENTUH MULA = 'sentuh mula';    
5.         SENTUHAN = 'sentuh';    
6.         TOUCHMOVE='touchmove';    
7.      
8.     } lain jika (typeof(window.onmspointerdown) != 'undefined') {    
9.         SENTUH MULA = 'MSPointerDown';    
10.         SENTUHAN = 'MSPointerUp';    
11.         TOUCHMOVE='MSPointerMove';    
12.     } lain {    
13.         SENTUH MULA = 'turun tetikus';    
14.         SENTUHAN = 'mouseup';    
15.         TOUCHMOVE = 'mouseemove';    
16.     }    
17.     fungsi NodeTouch(nod) {    
18.         ni._nod = nod;    
19.     }    
20.     fungsi ketik(nod,panggilan balik,skop) {    
21.         node.addEventListener(TOUCHSTART, fungsi(e) {    
22.              x = e.sentuhan[0].pageX;    
23.              y = e.touches[0].pageY;    
24.         });    
25.         node.addEventListener(TOUCHEND, fungsi(e) {    
26.             e.stopPropagation();    
27.             e.preventDefault();    
28.              var curx = e.changedTouches[0].pageX;    
29.              var cury = e.changedTouches[0].pageY;    
30.             jika (Math.abs(curx - x) < 6 && Math.ab y) < 6) {    
31.                 panggilan balik.apply(skop, hujah);    
32.             }    
33.         });    
34.     }    
35.     fungsi longTap(nod, panggil balik, skop) {    
36.         var x,y,Masa mula=0,Masa tamat=0,in_dis=palsu;    
37.         node.addEventListener(TOUCHSTART, fungsi(e) {    
38.              x = e.sentuhan[0].pageX;    
39.              y = e.touches[0].pageY;    
40.             Masa mula=(Tarikh baru()).getTime();    
41.         });    
42.         node.addEventListener(TOUCHEND, fungsi(e) {    
43.             e.stopPropagation();    
44.             e.preventDefault();    
45.              var curx = e.changedTouches[0].pageX;    
46.              var cury = e.changedTouches[0].pageY;    
47.             jika (Math.abs(curx - x) < 6 && Math.ab y) < 6) {    
48.                 in_dis=benar;    
49.             }lain{    
50.                 in_dis=salah;    
51.             }    
52.             Masa tamat=(Tarikh baru()).getTime();    
53.             jika (masa tamat - masa mula > 300 && dalam_dis) {    
54.                 panggilan balik.apply(skop, hujah);    
55.             }    
56.         });    
57.     }    
58.     NodeTouch.prototype.on = fungsi(evt, panggilan balik, skop) {    
59.         var skopObj;    
60.         var x,y;    
61.         jika (!skop) {    
62.             skopObj = ini._nod;    
63.         } lain {    
64.              skopskopObj = skop;    
65.         }    
66.         jika (evt === 'ketik') {    
67.             ketik (nod._ini, panggil balik, skop);    
68.         } else if(evt === 'longtap'){    
69.             longTap(this._node, panggil balik, skop);    
70.         } lain {    
71.             ini._node.addEventListener(evt, function() {    
72.                 panggilan balik.apply(skop, hujah);    
73.             });    
74.         }    
75.         kembali ini;    
76.     }    
77.     tetingkap.$ = fungsi(pemilih) {    
78.         var nod = dokumen.querySelector(selector);    
79.         jika (nod) {    
80.             kembali baru NodeTouch(nod);    
81.         } lain {    
82.             pulangan null;    
83.         }    
84.     }    
85. })();    
86. var kotak=$("#kotak");    
87. box.on("longtap",function(){    
88.     console.log("你已经长按了");    
89. },kotak)  

以上这篇HTML5触摸事件演化tap事件介绍就是小编分享给大家的全部内容了的全部内容了。考，也希望大家多多支持脚本之家。

原文地址：http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html