Touch事件

Touch事件

​最基本的touch事件包括4个事件：
touchstart：
当在屏幕上按下手指时触发

touchmove：
当在屏幕上移动手指时触发

touchend：
当在屏幕上抬起手指时触发

touchcancel：
当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。

​ 与移动端相关的interface主要有三个：

TouchEvent：
表示触摸状态发生改变时触发的event

Touch：
表示用户和触屏设备之间接触时单独的交互点(a single point of contact)

TouchList：
表示一组touches。当发生多点触摸的时候才用的到。

touchstart：
​ 当用户手指触摸到的触摸屏的时候触发。事件对象的 target 就是touch 发生位置的那个元素。

touchmove：
​ 当用户在触摸屏上移动触点(手指)的时候，触发这个事件。一定是先要触发touchstart事件，再有可能触发 touchmove 事件。
​ touchmove 事件的target 与最先触发的 touchstart 的 target 保持一致。touchmove事件和鼠标的mousemove事件一样都会多次重复调用，所以，事件处理时不能有太多耗时操作。不同的设备，移动同样的距离 touchmove 事件的触发频率是不同的。
​ 有一点需要注意：即使手指移出了 原来的target 元素，则 touchmove 仍然会被一直触发，而且 target 仍然是原来的 target 元素。

touchend：
​ 当用户的手指抬起的时候，会触发 touchend 事件。如何用户的手指从触屏设备的边缘移出了触屏设备，也会触发 touchend 事件。
​ touchend 事件的 target 也是与 touchstart 的 target 一致，即使已经移出了元素。

touchcancel：
​ 当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):
由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。
触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。
当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch对象被取消
touchcancel 事件一般用于保存现场数据。比如：正在玩游戏，如果发生了 touchcancel 事件，则应该把游戏当前状态相关的一些数据保存起来。

TouchList详解
​ 一个TouchList代表一个触摸屏幕上所有触点的列表。
​ 举例来讲, 如果一个用户用三根手指接触屏幕(或者触控板), 与之相关的TouchList 对于每根手指都会生成一个 Touch对象, 共计 3 个.

只读属性：length：
返回这个TouchList中Touch对的个数。(就是有几个手指接触到了屏幕)

方法：identifiedTouch()
返回值是在TouchList中的第 1 个 Touch 对象，已经被标记为过时，虽然有的浏览器还可以使用，但是不建议使用。

方法：item(index)
返回TouchList中指定索引的Touch对象。

changedTouches:(只读)
这个 TouchList对象列出了和这个触摸事件对应的那些发生了变化的 Touch 对象。
对于 touchstart 事件, 这个 TouchList 对象列出在此次事件中新增加的触点。
对于 touchmove 事件，列出和上一次事件相比较，发生了变化的触点。
对于 touchend 列出离开触摸平面的触点（这些触点对应已经不接触触摸平面的手指）

targetTouches:(只读)
这个TouchList列出了那些 touchstart发生在这个元素，并且还没有离开 touch surface 的touch point(手指)。是touches的一个严格子集。

touches`:(只读)
这个 TouchList 列出了事件触发时： touch suface上所有的 touch point。

identifier:
表示每 1 个 Touch 对象 的独一无二的 identifier。有了这个 identifier 可以确保你总能追踪到这个 Touch对象。
screenX:
触摸点相对于屏幕左边缘的 x 坐标。
screenY:
触摸点相对于屏幕上边缘的 y 坐标。
clientX:
触摸点相对于浏览器的 viewport左边缘的 x 坐标。不会包括左边的滚动距离。
clientY:
触摸点相对于浏览器的 viewport上边缘的 y 坐标。不会包括上边的滚动距离。
pageX:
触摸点相对于 document的左边缘的 x 坐标。 与 clientX 不同的是，他包括左边滚动的距离，如果有的话。
pageY:
触摸点相对于 document的左边缘的 y 坐标。 与 clientY 不同的是，他包括上边滚动的距离，如果有的话。
target:
总是表示 手指最开始放在触摸设备上的触发点所在位置的 element。 即使已经移出了元素甚至移出了document, 他表示的element仍然不变

封装移动端事件

(function (window){  //传入window，提高变量的查找效率
function myQuery(selector){  //这个函数就是对外提供的接口。
    //调用这个函数的原型对象上的_init方法，并返回
    return myQuery.prototype._init(selector);
}
myQuery.prototype = {
    /*初始化方法，获取当前query对象的方法*/
    _init: function (selector){
        if (typeof selector == "string"){
            //把查找到的元素存入到这个原型对象上。
            this.ele = window.document.querySelector(selector);
            //返回值其实就是原型对象。
            return this;
        }
    },
    /*单击事件：
     * 为了规避click的300ms的延迟，自定义一个单击事件
     * 触发时间：
     *   当抬起手指的时候触发
     *   需要判断手指落下和手指抬起的事件间隔，如果小于500ms表示单击时间。
     *
     *   如果是大于等于500ms，算是长按时间
     * */
    tap: function (handler){
        this.ele.addEventListener("touchstart", touchFn);
        this.ele.addEventListener("touchend", touchFn);

        var startTime,
            endTime;

        function touchFn(e){
            e.preventDefault()
            switch (e.type){
                case "touchstart":
                    startTime = new Date().getTime();
                    break;
                case "touchend":
                    endTime = new Date().getTime();
                    if (endTime - startTime < 500){
                        handler.call(this, e);
                    }
                    break;
            }
        }
    },
    /**
     * 长按
     * @param handler
     */
    longTag: function (handler){
        this.ele.addEventListener("touchstart", touchFn);
        this.ele.addEventListener("touchmove", touchFn);
        this.ele.addEventListener("touchend", touchFn);
        var timerId;

        function touchFn(e){
            switch (e.type){
                case "touchstart" :  //500ms之后执行
                    timerId = setTimeout(function (){
                        handler.call(this, e);
                    }, 500)
                    break;
                case "touchmove" :
                    //如果中间有移动也清除定时器
                    clearTimeout(timerId)
                    break;
                case "touchend" :
                    //如果在500ms之内抬起了手指，则需要定时器
                    clearTimeout(timerId);
                    break;
            }
        }
    },
    /**
     * 左侧滑动。
        记录手指按下的左边，在离开的时候计算 deltaX是否满足左滑的条件
     *
     */
    slideLeft: function (handler){
        this.ele.addEventListener("touchstart", touchFn);
        this.ele.addEventListener("touchend", touchFn);
        var startX, startY, endX, endY;

        function touchFn(e){
            e.preventDefault();
            var firstTouch = e.changedTouches[0];
            switch (e.type){
                case "touchstart":
                    startX = firstTouch.pageX;
                    startY = firstTouch.pageY;
                    break;
                case "touchend":
                    endX = firstTouch.pageX;
                    endY = firstTouch.pageY;
     //x方向移动大于y方向的移动，并且x方向的移动大于25个像素，表示在向左侧滑动
                    if (Math.abs(endX - startX) >= Math.abs(endY - startY) && startX - endX >= 25){
                        handler.call(this, e);
                    }
                    break;
            }
        }
    },
    /**
     * 右侧滑动。
     *
     */
    rightLeft: function (e){
        //TODO:
    }
}
window.$ = window.myQuery = myQuery;
 })(window);
      $("div").tap(function (e){
console.log("单击事件")
     })
       $("div").longTag(function (){
console.log("长按事件");
      })

     $("div").slideLeft(function (e){
console.log(this);
this.innerHTML = "左侧滑动了....."
     })