移动端touch拖动和click事件冲突问题解决
通过一个悬浮球交互功能的案例来阐述问题,以及解决办法。
实现效果
类似微信里的悬浮窗效果,苹果手机的悬浮球功能效果
- 可以点击拖动,然后吸附在窗口边缘
- 点击悬浮球,可以跳转界面,或者更改悬浮球的形态
准备
- 移动端使用 touch事件类型:
touchstart
当用户在触摸平面上放置了一个触点时触发 (手指放到屏幕上)
touchmove
当用户在触摸平面上移动触点时触发 (手指在屏幕上滑动)
touchend
当一个触点被用户从触摸平面上移除(抬起手指)
touchcancel
终止触摸事件
多点触控
TouchEvent.targetTouches
只读
一个 TouchList
对象,是包含了如下触点的 Touch
对象:触摸起始于当前事件的目标 element
上,并且仍然没有离开触摸平面的触点。
视口处于第四象限,原点在左上角
event.targetTouches.clientX // 触摸元素横坐标 event.targetTouches.clientY // 触摸元素纵坐标
TouchEvent.touches
只读
一个 TouchList
对象,包含了所有当前接触触摸平面的触点的 Touch
对象,无论它们的起始于哪个 element
上,也无论它们状态是否发生了变化。
实现
通过设置悬浮球定位样式,拖动的时候计算坐标,然后动态的修改悬浮球的定位偏移量,结合transtion
过渡效果,实现平滑的过渡
代码比较简单,就不贴了。
问题
当给元素添加了touch
事件之后,click
事件就不会出发了,那么怎么模拟点击效果呢?
分析
在不了解触摸事件响应机制的时候,你可能会从计算触摸目标元素的时长或者计算触摸起始位置来判定点击行为,但是这两种方式都不是最佳的,原因有以下几点:
- 计算触摸时长比较麻烦
- 判断移动距离不严谨,有可能拖动了一圈又回到初始位置
- 结合计算触摸时长和触摸元素起始位置两种方式,逻辑比较复杂
下面看我是怎么做的:
首先应该了解触摸行为的事件响应机制:
- 如果有拖动行为,事件执行次序为:
touchstart
->touchmove
->touchend
- 没有拖动行为,事件执行次序为:
touchstart
->touchend
从上面的分析来看,我们可以从touchmove 入手,继续往下看👇
解决
- 在
touchmove
事件中增加一个是否移动过的标记isMoved: true
- 在
touchend
事件中判断isMoved
是否为true
,是true
则按原有逻辑执行,是false
则说明没有移动过,属于点击行为 - 在
touchend
事件最后,重置isMoved
为初始值false
,这样每一个触摸操作都可以进入同样的逻辑,不用担心状态混乱
完美解决模拟点击行为🎉🎉
以上就是移动端touch拖动和click事件冲突问题解决的详细内容,更多关于touch click事件冲突解决的资料请关注脚本之家其它相关文章!
相关文章
networkInformation.downlink测用户网速方法详解
这篇文章主要为大家介绍了networkInformation.downlink测用户网速方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-05-05浅谈bootstrap layer.open中end的使用方法
今天小编就为大家分享一篇浅谈bootstrap layer.open中end的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09JavaScript canvas基于数组生成柱状图代码实例
这篇文章主要介绍了JavaScript canvas基于数组生成柱状图代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03Bootstrap datepicker日期选择器插件使用详解
这篇文章主要为大家详细介绍了Bootstrap datepicker日期选择器插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-07-07
最新评论