H5模拟单击事件
项目背景(taro,H5)
功能(元素同时实现单击和长按功能,类似于微信消息列表长按显示菜单栏,单击进入聊天)
遇到问题(安卓手机正常使用,ios长按时会触发单击事件)
事故现场
解决方法
不使用onClick方法用模拟单击代替
先上代码
模拟单击事件做法其实非常简单,但要做到与单击事件一样并且提升用户体验是需要考虑很多问题的
下面来分享一下我的制作过程
我们可以使用记录接触元素的时间与离开元素的时间当小于350ms我们可以视为单击事件(因为onClick也是350ms)
当有一点要考虑的是,如果内容过多出现滚动,我们快速滑动时其实接触元素的事件也会小于350ms,因此我们可以再加一层判断如果接触元素事件小于350ms同时有拖动的动作则不视为单击事件直接return,
当然,我们既然模拟单击,就必须防止内层元素冒泡,毕竟我们在外层元素模拟单击,内层元素也包括在内
##增加用户体验
当离开元素时且接触时间少于350ms不立即执行操作,稍微延长一小段时间(350ms左右,是项目需求),然后这段时间改改样式或者增加点动画什么的,增加用户体验,谨记一点用户所有操作都希望页面有回应。
时间,如果有更好的实现方式可以评论或联系