JavaScript touch / touch事件

Touch对象表示在触控设备上的触摸点，通常是指手指在触屏设备或者触摸板上的操作，在用户手机在屏幕上滑动时就会实时的触发touch事件

• touchstart
  当用户手指放到屏幕上触发

• touchmove
  当用户手指在屏幕上移动时触发

• touchend
  当用户手指从屏幕上离开时触发

当我们在移动端触发触屏事件时运动变量e会返回一个TouchEvent对象，在该对象中包含几个我们需要的关键信息

1. touches:当前屏幕上所有手指触摸点的列表
2. targetTouches：当前对象上所有触摸点的列表
3. changedTouches：涉及引发当前事件的所有触摸点的列表

我们一般使用changeTouch来获取当前手指的相对位置

clientX:14.474000930786133

clientY:113.15800476074219

force:1

identifier:0

pageX:14.474000930786133

pageY:113.15800476074219

radiusX:15.131579399108887

radiusY:15.131579399108887

rotationAngle:0

screenX:181

screenY:244

target:li

在移动端我们会使用touch事件来替代mouse事件，并且在移动端的click事件有300ms的延迟，这有时可能会造成用户感觉反应迟缓，所有有时我们需要使用touch事件来替代click事件

var webClick = function (ele, callback) {
        if (ele && typeof ele == 'object') {
            var isMove = true,
                startTime,
                endTime;
            ele.addEventListener("touchstart", function () {
                startTime = Date.now()

            })
            ele.addEventListener("touchmove", function () {
                isMove = true;
            })
            ele.addEventListener("touchend", function () {
                endTime = Date.now();
                if (!isMove && endTime - startTime < 150) {
                    callback && callback();
                }
                isMove = false;
            })
        }

    }

同样我们可以使用上面的代码来监听用户长按事件，只需要判断用户手指在屏幕的停留时间即可