HTML5触摸事件（多点触控、单点触控）Demo

HTML5的触摸API支持处理单点和多点的触摸事件处理。

接口

1、TouchEvent：代表了一个触摸事件。

主要属性：

TouchEvent.changedTouches：一个TouchList对象。代表了所有上一个接触点到当前点状态发生变化的点。

TouchEvent.touches：一个TouchList对象。代表的所有当前触摸点，不管目标或者状态是否改变。

TouchEvent.type：触摸事件类型。有touchstart、touchend、touchmove、touchenter、touchleave和touchleave。

2、Touch：代表一个单独的触摸点。

主要属性：Touch.identifier：这个触摸对象的唯一标识。

3、TouchList：代表一组触摸点。比如同时有多根手指放在在屏幕上面。

4、DocumentTouch：包含创建Touch和TouchList对象的方法。

 

触摸事件

1. touchstart：触摸的时候发生。

2. touchend：手指从屏幕抬起时发生。手指划出了屏幕也会触发这个事件。

3. touchmove：手指沿着屏幕滑动时触发。

4. touchenter：触摸点进入到一个元素。

5. touchleave：触摸点离开一个元素。

6. touchcancel：当触摸受到干扰而中断时触发。比如一个弹框，或者触摸点离开了文档窗口区域到了其他地方，或者触摸点超出了最大可支持的上限，那么最先的触摸将会退出。

 

下面一个跟踪多点触控的例子，允许用户同时多于一个手指画线，可以直接运行：

    
    
        
          Your browser does not support canvas element.
        
        

        

        Log: 

        
    

文章参考地址及示例来源： https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events