html5移动端长按事件填坑历程

1、html5移动端长按事件填坑历程背景：在h5页面，实现长按弹出上拉菜单，我们知道h5没有所谓的长按大事，有些ui组件库封装了长按大事，比如zepto的longtap在pc端有鼠标大事（mousedown，mousemove，mouseup），在h5有touch触摸大事（touchstart，touchmove，touchend）不能由于需要一个长按大事就引入一个库，这里我们就基于touch触摸大事来实现。touch大事群手指迅速点击一个元素，会经过：touchstart -> touchend -> click手指长按一个元素，会经过：touchstart -> touche

2、nd手指滑动，会经过：touchstart -> touchmove（n次） -> touchend综上：1、click大事发生在touchstart和touchend之后，这也就是我们所说的移动端点击大事普通有300ms的延迟（可用tap大事替代）2、长按的过程是touchstart之后touchend之前，区别长按还是点击，可以按照时光推断，比如大于500ms是长按，小于500ms是点击3、假如在点击屏幕的时候手指滑动的话，是不会触发click大事的由以上结论，我们就可实现长按大事主要规律：1、在touchstart里定义延迟器，500ms后执行长按规律2、在touchend里

3、取消延迟器，即在touchstart触发的500ms之内，假如手指从屏幕上移开，则不是长按3、在touchmove里取消延迟器，即假如手指在屏幕上滑动，则不是长按代码如下：注重：1、h5页面长按会触发系统的默认大事，ios和安卓表现不同，如下图。可以用法event.preventdefault()办法阻挡后面默认大事的发生在touchstart中preventdefault，会导致click大事不触发和a链接点击没反应。可以用法tap代替click，但是a标签的话就不太便利了在touchmove中preventdefault，会阻挡扫瞄器默认滚动2、在某些手机，比如vivo，没有move，但是

4、touchmove大事仍然会触发在这种状况，可以按照touch的位置推断手指是否移动，来区别是点击长按或者是滑动在touchstart大事中记录touch时的x，y的坐标，然后在touchmove中，再推断touch的位置是否和touchstart中的一样的。注重，查看touchevent最好在谷歌模拟手机扫瞄器中查看，不要在真切手机扫瞄器查看，本人在真切手机扫瞄器console和alert都看不到具体的信息，怀疑了半天，发觉真切手机扫瞄器虽然看不到信息，但是可以挺直取值（touchlist是类数组对象）触屏大事的操作信息都存储在touchevent类型对象中，此对象属性较多，下面着重介绍下t

5、ouches、targettouches与changedtouchestouches只读：手指触摸到屏幕上，全部触摸点的集合;targettouchs只读：手指触摸到dom元素(绑定大事的dom节点)上的触摸点的集合changetouches只读：表示自上次触摸大事以来发生转变的（和触摸大事对应的touch 对象）对于 大事, changedtouches是此次大事中新增强的触点。对于是刚从触摸面离开的触点（最后一次离开屏幕的手指的touch 对象）下图中有两个div，只对div2绑定了touchstart大事当手指第一次触摸到div2时，三个对象表示的都是一样的；再放下其次根手指和第三根手指

6、同时触摸div1和div2时，此时touches对象表示的是第一根手指、其次根手指、第三根手指的信息此时targettouches对象表示的是第一根手指和第三根手指的信息，由于绑定touch大事的节点为div2而changedtouches对象表示的是其次根手指和第三根手指的信息，由于第一根手指没有变幻综上：touchmove时，假如手指从目标元素(绑定大事的dom节点)滑出，targettouches还会有此触摸点信息当一个触摸点从目标元素离开，它的信息将从 touches、targettouches里移除，但是changedtouches会保留此触摸点信息；当最后一个触摸点离开，touches、targettouches变成空值，而changedtouches保留着最后一个离开的触摸点信息扩展：touch.screenx：触点相对于屏幕左边沿的x坐标。只读属性。touch.screeny：触点相对于屏幕上边沿的y坐标。只读属性。touch.clientx：触点相对于可见视区(visual viewport)左边沿的x坐标。不包括任何滚动偏移。只读属性。touch.clienty：触点相对于可见视区(visual viewport)上边沿的y坐标。不包括任何滚动偏移。只读属性。touch.pagex：触点相对于html文档左边沿的