Rumah >hujung hadapan web >Tutorial H5 >Pengenalan kepada evolusi acara sentuh HTML5 ketik kemahiran tutorial event_html5
Pengenalan kepada evolusi acara sentuh HTML5 ketik kemahiran tutorial event_html5
- WBOYasal
- 2016-05-16 15:45:252087semak imbas
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 |
<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
|
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):
|
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 mendatarscrolling |
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">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 <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.
|
| 事件名称 | 描述（在触摸设备上） |
|---|---|
| MSPointerDown | 触摸开始 |
| MSPointerMove | 接触点移动 |
| MSPointerUp | 触摸结束 |
| MSPointerOver | 触摸点移动到元素内，相当于mouseover |
| MSPointerOut | 触摸点离开元素，相当于mouseout |
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
- (fungsi() {
- var SENTUH MULA, SENTUH;
- jika (typeof(window.ontouchstart) != 'undefined') {
- SENTUH MULA = 'sentuh mula';
- SENTUHAN = 'sentuh';
- TOUCHMOVE='touchmove';
- } lain jika (typeof(window.onmspointerdown) != 'undefined') {
- SENTUH MULA = 'MSPointerDown';
- SENTUHAN = 'MSPointerUp';
- TOUCHMOVE='MSPointerMove';
- } lain {
- SENTUH MULA = 'turun tetikus';
- SENTUHAN = 'mouseup';
- TOUCHMOVE = 'mouseemove';
- }
- fungsi NodeTouch(nod) {
- ni._nod = nod;
- }
- fungsi ketik(nod,panggilan balik,skop) {
- node.addEventListener(TOUCHSTART, fungsi(e) {
- x = e.sentuhan[0].pageX;
- y = e.touches[0].pageY;
- });
- node.addEventListener(TOUCHEND, fungsi(e) {
- e.stopPropagation();
- e.preventDefault();
- var curx = e.changedTouches[0].pageX;
- var cury = e.changedTouches[0].pageY;
- jika (Math.abs(curx - x) < 6 && Math.ab y) < 6) {
- panggilan balik.apply(skop, hujah);
- }
- });
- }
- fungsi longTap(nod, panggil balik, skop) {
- var x,y,Masa mula=0,Masa tamat=0,in_dis=palsu;
- node.addEventListener(TOUCHSTART, fungsi(e) {
- x = e.sentuhan[0].pageX;
- y = e.touches[0].pageY;
- Masa mula=(Tarikh baru()).getTime();
- });
- node.addEventListener(TOUCHEND, fungsi(e) {
- e.stopPropagation();
- e.preventDefault();
- var curx = e.changedTouches[0].pageX;
- var cury = e.changedTouches[0].pageY;
- jika (Math.abs(curx - x) < 6 && Math.ab y) < 6) {
- in_dis=benar;
- }lain{
- in_dis=salah;
- }
- Masa tamat=(Tarikh baru()).getTime();
- jika (masa tamat - masa mula > 300 && dalam_dis) {
- panggilan balik.apply(skop, hujah);
- }
- });
- }
- NodeTouch.prototype.on = fungsi(evt, panggilan balik, skop) {
- var skopObj;
- var x,y;
- jika (!skop) {
- skopObj = ini._nod;
- } lain {
- skopskopObj = skop;
- }
- jika (evt === 'ketik') {
- ketik (nod._ini, panggil balik, skop);
- } else if(evt === 'longtap'){
- longTap(this._node, panggil balik, skop);
- } lain {
- ini._node.addEventListener(evt, function() {
- panggilan balik.apply(skop, hujah);
- });
- }
- kembali ini;
- }
- tetingkap.$ = fungsi(pemilih) {
- var nod = dokumen.querySelector(selector);
- jika (nod) {
- kembali baru NodeTouch(nod);
- } lain {
- pulangan null;
- }
- }
- })();
- var kotak=$("#kotak");
- box.on("longtap",function(){
- console.log("你已经长按了");
- },kotak)
以上这篇HTML5触摸事件演化tap事件介绍就是小编分享给大家的全部内容了的全部内容了。考，也希望大家多多支持脚本之家。
原文地址：http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html