Perbincangan ringkas tentang acara Sentuhan kemahiran javascript_javascript

acara sentuhan js, biasanya digunakan untuk gelongsor skrin sentuh pada terminal mudah alih

mula sentuh: Dicetuskan apabila jari menyentuh skrin; ia akan dicetuskan walaupun sudah ada jari pada skrin.
touchmove: Dicetuskan secara berterusan apabila jari meluncur pada skrin. Semasa acara ini, memanggil preventDefault() menghalang penatalan.
touchend: tercetus apabila jari dikeluarkan dari skrin.
touchcancel: Dipecat apabila sistem berhenti menjejaki sentuhan. Peristiwa pencetus yang tepat untuk acara ini tidak jelas dalam dokumentasi.

Objek peristiwa peristiwa di atas semuanya mempunyai atribut berikut:

sentuhan: Satu susunan objek Sentuh yang mewakili operasi sentuhan yang dijejaki pada masa ini.
targetTouches: Susunan objek Sentuh khusus untuk sasaran acara.
changeTouches: Susunan objek Sentuhan yang mewakili apa yang telah berubah sejak sentuhan terakhir.

Setiap objek Sentuh mengandungi sifat berikut:

clientX: Koordinat X sasaran sentuh dalam port pandangan.
klienY: Y menyelaras sasaran sentuh dalam port pandang.
pengecam: mewakili ID unik sentuhan.
pageX: Koordinat-x sasaran sentuh dalam halaman.
halamanY: Koordinat y sasaran sentuh dalam halaman.
screenX: Koordinat x sasaran sentuh pada skrin.
skrinY: Koordinat y sasaran sentuh pada skrin.
sasaran: Koordinat nod DOM yang disentuh

Acara sentuh

Tiga peristiwa sentuhan asas disenaraikan dalam spesifikasi dan dilaksanakan secara meluas merentas peranti mudah alih:
​ 1. touchstart: Letakkan jari anda pada elemen DOM.
​ 2. touchmove: seret elemen DOM dengan jari anda.
3. touchend: Alihkan jari anda daripada elemen DOM.

Setiap peristiwa sentuhan termasuk tiga senarai sentuhan:
​ 1. sentuhan: senarai semua jari pada skrin pada masa ini.
​ 2. targetTouches: senarai jari yang terletak pada elemen DOM semasa.
3. changedTouches: senarai jari yang terlibat dalam acara semasa

Contohnya, dalam acara hujung sentuh, ini ialah jari yang dikeluarkan.

Senarai ini terdiri daripada objek yang mengandungi maklumat sentuhan:
​ 1. pengecam: nilai berangka yang secara unik mengenal pasti jari semasa dalam sesi sentuhan.
​ 2. sasaran: elemen DOM, yang merupakan sasaran tindakan.
​ 3. Koordinat pelanggan/halaman/skrin: Lokasi pada skrin di mana tindakan itu berlaku.
​ 4. Koordinat jejari dan putaranSudut: Lukiskan elips yang lebih kurang sama dengan bentuk jari.

Aplikasi yang didayakan sentuh

Peristiwa permulaan sentuh, gerakan sentuh dan hujung sentuh menyediakan set ciri yang cukup kaya untuk menyokong hampir semua jenis interaksi berasaskan sentuhan - termasuk gerak isyarat berbilang sentuhan biasa seperti picit untuk mengezum, memutar dan menunggu. Kod berikut membolehkan anda menyeret elemen DOM ke sekeliling menggunakan sentuhan satu jari:

 var obj = document.getElementByIdx_x_x_x_x_x_x('id');
 obj.addEventListener('touchmove', function(event) 
 { // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) 
 {
  var touch = event.targetTouches[0];
   // 把元素放在手指所在的位置
   obj.style.left = touch.pageX + 'px';
     obj.style.top = touch.pageY + 'px';
  }
}, false);

Berikut ialah contoh yang memaparkan semua titik sentuh semasa pada skrin.

   // 设置画布并通过ctx变量来暴露上下文复制代码
 canvas.addEventListener('touchmove',   
 function(event) {
    for (var i = 0; i < event.touches.length; i++) {
 var touch = event.touches;
  ctx.beginPath();
    ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
    ctx.fill();
    ctx.stroke();
   }
  }, false);

Demo

Terdapat banyak demo berbilang sentuhan yang menarik di luar sana, seperti demo lukisan berasaskan kanvas oleh Paul Irish dan lain-lain.

Terdapat juga Ninja Pelayar, demo teknologi yang merupakan klon Fruit Ninja yang menggunakan peralihan, peralihan dan kanvas CSS3.

Amalan Terbaik

Zum Sekat

Tetapan berbilang sentuh lalai tidak begitu mudah untuk digunakan kerana leretan dan gerak isyarat anda selalunya terikat dengan gelagat penyemak imbas, seperti menatal dan mengezum.

Untuk melumpuhkan penskalaan, gunakan teg meta berikut untuk menetapkan port pandangan anda supaya ia tidak boleh berskala kepada pengguna:
Content="width=device-width, initial-scale=1.0, user-scalable=no">
​ Lihat artikel ini pada HTML 5 mudah alih untuk mengetahui lebih lanjut tentang tetapan kawasan paparan.

Halang menatal

Sesetengah peranti mudah alih mempunyai gelagat gerak sentuh lalai, seperti kesan tatal lampau iOS klasik, yang menyebabkan paparan melantun apabila tatal melebihi had kandungan. Amalan ini menimbulkan kekeliruan dalam banyak aplikasi berbilang sentuhan, tetapi mudah untuk melumpuhkannya.

   document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
   }, false); 

细心渲染

如果你正在编写的多点触控应用涉及了复杂的多指手势的话，要小心地考虑如何响应触摸事件，因为一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出所有触点的例子，你可以在有触摸输入的时候就立刻进行绘制：

  canvas.addEventListener('touchmove', function(event) {
   renderTouches(event.touches);
  },

不过这一技术并不是要随着屏幕上的手指个数的增多而扩充，替代做法是，可以跟踪所有的手指，然后在一个循环中做渲染，这样可获得更好的性能：

  var touches = []
  canvas.addEventListener('touchmove', function(event) {
    touches = event.touches;
  }, false);
  // 设置一个每秒60帧的定时器
  timer = setInterval(function() {
   renderTouches(touches);
  }, 15);

     提示：setInterval不太适合于动画，因为它没有考虑到浏览器自己的渲染循环。现代的桌面浏览器提供了requestAnimationFrame这一函数，基于性能和电池工作时间原因，这是一个更好的选择。一但浏览器提供了对该函数的支持，那将是首选的处理事情的方式。

使用targetTouches和changedTouches
    要记住的一点是，event.touches是与屏幕接触的所有手指的一个数组，而不仅是位于目标DOM元素上的那些。你可能会发现使用 event.targetTouches和event.changedTouches来代替event.touches更有用一些。

    最后一点，因为你是在为移动设备做开发，因此你应该要留心移动的最佳做法，这些在Eric Bidelman的文章中有论及，以及要了解这一W3C文档。

设备支持     

    遗憾的是，触摸事件的实现在完备性和质量方面的差别很大。我编写了一个诊断脚本来显示一些关于触摸API实现的基本信息，其中包括哪些事件是支持的，以及 touchmove事件触发的解决方案。我在Nexus One和Nexus S硬件上测试了Android2.3.3，在Xoom上测试了Android 3.0.1，以及在iPad和iPhone上测试了iOS 4.2。

    简而言之，所有被测试的浏览器都支持touchstart、touchend和touchmove事件。

    规范提供了额外的三个触摸事件，但被测试的浏览器没有支持它们：
      1. touchenter：移动的手指进入一个DOM元素。
      2. toucheleave：移动手指离开一个DOM元素。
      3. touchcancel：触摸被中断（实现规范）。

     被测试的浏览器还在每个触摸列表内部都提供了touches、targetTouches和changedTouches列表。不过，被测试的浏览器没有支持radiusX、radiusY或是rotationAngle属性，这些属性指明触摸屏幕的手指的形状。在一次touchmove期间，事件大约一秒钟触发60次，所有的被测试设备都是这样。