目录实现效果准备实现问题分析解决通过一个悬浮球交互功能的案例来阐述问题,以及解决办法。 实现效果 类似微信里的悬浮窗效果,苹果手机的悬浮球功能效果 可以点击拖动,然后吸附在窗口边缘点
通过一个悬浮球交互功能的案例来阐述问题,以及解决办法。
类似微信里的悬浮窗效果,苹果手机的悬浮球功能效果
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事件冲突解决的资料请关注编程网其它相关文章!
--结束END--
本文标题: 移动端touch拖动和click事件冲突问题解决
本文链接: https://www.lsjlt.com/news/168599.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0