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

    }

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。