javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > touch click事件冲突解决

移动端touch拖动和click事件冲突问题解决

作者:甜点cc

这篇文章主要为大家介绍了移动端touch拖动和click事件冲突问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

通过一个悬浮球交互功能的案例来阐述问题,以及解决办法。

实现效果

类似微信里的悬浮窗效果,苹果手机的悬浮球功能效果

准备

touchstart当用户在触摸平面上放置了一个触点时触发 (手指放到屏幕上)

touchmove当用户在触摸平面上移动触点时触发 (手指在屏幕上滑动)

touchend当一个触点被用户从触摸平面上移除(抬起手指)

touchcancel终止触摸事件

多点触控

一个 TouchList 对象,是包含了如下触点的 Touch 对象:触摸起始于当前事件的目标 element 上,并且仍然没有离开触摸平面的触点。

视口处于第四象限,原点在左上角

event.targetTouches.clientX // 触摸元素横坐标
event.targetTouches.clientY // 触摸元素纵坐标

一个 TouchList 对象,包含了所有当前接触触摸平面的触点的 Touch 对象,无论它们的起始于哪个 element 上,也无论它们状态是否发生了变化。

实现

通过设置悬浮球定位样式,拖动的时候计算坐标,然后动态的修改悬浮球的定位偏移量,结合transtion过渡效果,实现平滑的过渡

代码比较简单,就不贴了。

问题

当给元素添加了touch事件之后,click事件就不会出发了,那么怎么模拟点击效果呢?

分析

在不了解触摸事件响应机制的时候,你可能会从计算触摸目标元素的时长或者计算触摸起始位置来判定点击行为,但是这两种方式都不是最佳的,原因有以下几点:

下面看我是怎么做的:

首先应该了解触摸行为的事件响应机制:

从上面的分析来看,我们可以从touchmove 入手,继续往下看👇

解决

完美解决模拟点击行为🎉🎉

以上就是移动端touch拖动和click事件冲突问题解决的详细内容,更多关于touch click事件冲突解决的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文