触摸事件 touchstart、touchmove、touchend

目录

触摸事件概述

触摸事件编码

触摸手指个数分析

触摸目标 DOM 元素分析

触摸位置分析

---

触摸事件概述

1、HTML5 中， PC 端基于鼠标的界面互动主要是单击， 移动端界面交互方式主要是触摸。

2、移动端浏览器触摸事件：

事件名称	描述	是否包含 touches 数组
touchstart	触摸开始，多点触控，后面的手指同样会触发	是
touchmove	接触点改变，滑动时	是
touchend	触摸结束，手指离开屏幕时	是
touchcancel	触摸被取消，当系统停止跟踪触摸的时候触发	否

3、每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

1）touches：当前位于屏幕上的所有手指的列表。
2）targetTouches：位于当前DOM元素上手指的列表。
3）changedTouches：涉及当前事件手指的列表。

4、每个 Touch 对象包含的属性如下：

clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触摸的DOM节点目标。

触摸事件编码

    
    
    
    
    
    
    



    工人阶级是我国的领导阶级，是全面建成小康社会、坚持和发展中国特色社会主义的...

    在中国工会第十七次全国代表大会即将召开之际，让我...

    工人阶级是我们党最坚实最可靠的阶级基础...

    我国工人阶级是我们党最坚实最可靠的阶级基础。我国工人阶级从来都具有走在...

    工人阶级和广大劳动群众始终是推动我国经济社会发展、维护社会安定团结的根本...

    改革开放以来，我国工人阶级队伍不断壮大，素质全面提高，结构更加优化，面貌焕然...

1、如果在 PC 上访问，可以使用 Chrome 浏览器的移动响应式设备进行模拟，或者直接在移动设备(如手机)上访问

2、Chrome 浏览器，F12 进入开发者模式，然后点击左上角的第二个按钮进行切换。

3、上面是使用 JQuery 的写法，推荐使用如下所示的 JavaScript 方式，因为在获取回调函数的 事件对象时，JQuery 方式会有问题，JavaScript 则是没有问题的。

4、主要就是在绑定事件的部分略有不同，可以参考 HTML DOM addEventListener() 方法

触摸手指个数分析

1、如下所示，将屏幕上触摸的手指个数信息打印出来进行分析。

    
    
    
    
    
    
    
    



    touchstart


    touchmove


    touchend

2、如下所示，左图是 document.addEventListener、右图是 $(".move")[0].addEventListener。

3、tSize 是当前位于屏幕上的所有手指的列表个数、targetTSize 是位于当前绑定事件的 DOM 元素上手指的列表个数、changedTSize 是涉及当前事件手指的列表个数。

4、对于各个数据的含义，想必测试之后一目了然，就不再多说了。

触摸目标 DOM 元素分析

    
    
    
    
    
    
    
    



    触摸测试区域1


    touchstart


    touchmove


    touchend


    触摸测试区域2

触摸位置分析

    
    
    
    
    
    
    
    



    触摸测试区域1


    touchstart


    touchmove


    touchend


    触摸测试区域2