绑定完请刷新页面
取消
刷新

分享好友

×
取消 复制
移动端touch拖动事件和click事件冲突问题解决
2022-09-28 15:25:58

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

实现效果

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

  1. 可以点击拖动,然后吸附在窗口边缘

  2. 点击悬浮球,可以跳转界面,或者更改悬浮球的形态

准备

  1. 移动端使用 touch事件类型
  • touchstart当用户在触摸平面上放置了一个触点时触发 (手指放到屏幕上)

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

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

  • touchcancel终止触摸事件

多点触控

  1. TouchEvent.targetTouches 只读

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

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

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

  1. TouchEvent.touches 只读

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

实现

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

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

问题

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

分析

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

  1. 计算触摸时长比较麻烦

  2. 判断移动距离不严谨,有可能拖动了一圈又回到初始位置

  3. 结合计算触摸时长和触摸元素起始位置两种方式,逻辑比较复杂

下面看我是怎么做的:

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

  • 如果有拖动行为,事件执行次序为:touchstart-> touchmove-> touchend

  • 没有拖动行为,事件执行次序为:touchstart-> touchend

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

解决

  1. touchmove事件中增加一个是否移动过的标记isMoved: true

  2. touchend事件中判断isMoved是否为true,是true则按原有逻辑执行,是false则说明没有移动过,属于点击行为

  3. touchend事件后,重置isMoved为初始值false,这样每一个触摸操作都可以进入同样的逻辑,不用担心状态混乱

分享好友

分享这个小栈给你的朋友们,一起进步吧。

数据库开发
创建时间:2020-06-17 14:33:07
数据库开发是数据库管理系统(DBMS)和数据库应用软件设计研发的总称,主要是数据运维、参与数据库生产环境的问题优化和解决等方面的事宜
展开
订阅须知

• 所有用户可根据关注领域订阅专区或所有专区

• 付费订阅:虚拟交易,一经交易不退款;若特殊情况,可3日内客服咨询

• 专区发布评论属默认订阅所评论专区(除付费小栈外)

技术专家

查看更多
  • 小雨滴
    专家
戳我,来吐槽~