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

发表于 更新于 分类于 阅读次数： Changyan： 本文字数： 1.3k 阅读时长 ≈ 1 分钟
本文分析移动端touch拖动事件和click事件冲突问题，通过一个悬浮球交互功能的案例来讲解，以及问题的解决办法。

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

实现效果

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

  1. 可以点击拖动，然后吸附在窗口边缘
  2. 点击悬浮球，可以跳转界面，或者更改悬浮球的形态

准备

  1. 移动端使用 touch事件类型：
  • touchstart当用户在触摸平面上放置了一个触点时触发 （手指放到屏幕上）
  • touchmove当用户在触摸平面上移动触点时触发 （手指在屏幕上滑动）
  • touchend当一个触点被用户从触摸平面上移除（抬起手指）
  • touchcancel终止触摸事件

多点触控

  1. TouchEvent.targetTouches 只读

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

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

1
2
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，这样每一个触摸操作都可以进入同样的逻辑，不用担心状态混乱

完美解决模拟点击行为

我是 甜点cc

热爱前端，也喜欢专研各种跟本职工作关系不大的技术，技术、产品兴趣广泛且浓厚，等待着一个创业机会。主要致力于分享实用技术干货，希望可以给一小部分人一些微小帮助。

我排斥“新人迷茫，老人看戏”的现象，希望能和大家一起努力破局。营造一个良好的技术氛围，为了个人、为了我国的数字化转型、互联网物联网技术、数字经济发展做一点点贡献。数风流人物还看中国、看今朝、看你我。