A brief discussion on the Touch event of javascript_javascript skills

js touch event, generally used for touch screen sliding on mobile terminals

Copy code The code is as follows:

$(function(){document.addEventListener("touchmove", _touch , false);}) function _touch(event){alert(1);}

touchstart: Triggered when a finger touches the screen; it will be triggered even if there is already a finger on the screen.
touchmove: Continuously triggered when the finger slides on the screen. During this event, calling preventDefault() prevents scrolling.
touchend: triggered when the finger is removed from the screen.
touchcancel: Fired when the system stops tracking touches. The exact triggering event for this event is not clear in the documentation.

The event objects of the above events all have the following attributes:

touches: An array of Touch objects representing the currently tracked touch operations.
targetTouches: An array of Touch objects specific to the event target.
changeTouches: An array of Touch objects that represents what has changed since the last touch.

Each Touch object contains the following properties:

clientX: The X coordinate of the touch target in the viewport.
clientY: Y coordinate of the touch target in the viewport.
identifier: represents the unique ID of the touch.
pageX: The x-coordinate of the touch target in the page.
pageY: The y coordinate of the touch target in the page.
screenX: The x coordinate of the touch target on the screen.
screenY: The y coordinate of the touch target on the screen.
target: Touched DOM node coordinates

Touch event

Three basic touch events listed in the specification and widely implemented across mobile devices:
​ 1. touchstart: Place your finger on a DOM element.
​ 2. touchmove: drag a DOM element with your finger.
3. touchend: Move your finger away from a DOM element.

Each touch event includes three touch lists:
​ 1. touches: a list of all fingers currently on the screen.
​ 2. targetTouches: a list of fingers located on the current DOM element.
3. changedTouches: a list of fingers involved in the current event

For example, in a touchend event, this would be the removed finger.

These lists consist of objects containing touch information:
​ 1. identifier: a numerical value that uniquely identifies the current finger in the touch session.
​ 2. target: DOM element, which is the target of the action.
​ 3. Client/page/screen coordinates: The location on the screen where the action occurs.
​ 4. Radius coordinates and rotationAngle: Draw an ellipse approximately equivalent to the shape of a finger.

Touch-enabled application

The touchstart, touchmove and touchend events provide a rich enough set of features to support almost any type of touch-based interaction - including common multi-touch gestures such as pinch to zoom, rotate and wait. The following code lets you drag a DOM element around using one-finger touch:

 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);

The following is an example that displays all the current touch points on the screen. Its purpose is to feel the responsiveness of the device.

   // 设置画布并通过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

There are a lot of interesting multi-touch demos out there, like this canvas-based painting demo by Paul Irish and others.

There’s also Browser Ninja, a tech demo that’s a Fruit Ninja clone that uses CSS3 transitions, transitions, and canvases.

Best Practices

Block Zoom

The default multi-touch settings are not particularly easy to use because your swipes and gestures are often tied to browser behaviors, such as scrolling and zooming.

To disable scaling, use the following meta tag to set your viewport so that it is not scalable to the user:
Content="width=device-width, initial-scale=1.0, user-scalable=no">
​ ​ Check out this article on mobile HTML 5 to learn more about view area settings.

Prevent scrolling

Some mobile devices have default touchmove behavior, such as the classic iOS overscroll effect, which causes the view to bounce when the scroll exceeds the limits of the content. This practice creates confusion in many multi-touch applications, but it's easy to disable it.

   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次，所有的被测试设备都是这样。