H5模拟单击事件

H5模拟单击事件

项目背景（taro，H5）
功能（元素同时实现单击和长按功能，类似于微信消息列表长按显示菜单栏，单击进入聊天）
遇到问题（安卓手机正常使用，ios长按时会触发单击事件）

事故现场

解决方法

不使用onClick方法用模拟单击代替
先上代码

模拟单击事件做法其实非常简单，但要做到与单击事件一样并且提升用户体验是需要考虑很多问题的
下面来分享一下我的制作过程

我们可以使用记录接触元素的时间与离开元素的时间当小于350ms我们可以视为单击事件（因为onClick也是350ms）
当有一点要考虑的是，如果内容过多出现滚动，我们快速滑动时其实接触元素的事件也会小于350ms，因此我们可以再加一层判断如果接触元素事件小于350ms同时有拖动的动作则不视为单击事件直接return，
当然，我们既然模拟单击，就必须防止内层元素冒泡，毕竟我们在外层元素模拟单击，内层元素也包括在内

##增加用户体验

当离开元素时且接触时间少于350ms不立即执行操作，稍微延长一小段时间（350ms左右，是项目需求），然后这段时间改改样式或者增加点动画什么的，增加用户体验，谨记一点用户所有操作都希望页面有回应。
时间，如果有更好的实现方式可以评论或联系

大家一起努力吧~