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

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

实现效果



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


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


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


准备


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


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


目录
相关文章
|
7月前
|
小程序
小程序中点击子元素事件而不触发父元素的点击事件
小程序中点击子元素事件而不触发父元素的点击事件
111 0
|
30天前
移动端click事件、touch事件、tap事件的区别
移动端click事件、touch事件、tap事件的区别
41 0
|
21天前
|
iOS开发 容器
在做动画的控件不触发手势事件问题及解决方案
在做动画的控件不触发手势事件问题及解决方案
20 0
|
30天前
|
开发者
移动端 click 事件、touch 事件、tap 事件的区别
移动端 click 事件、touch 事件、tap 事件的区别
16 1
|
30天前
|
JavaScript
js的鼠标移入移出事件
js的鼠标移入移出事件
|
30天前
|
C#
C# 禁止ComboBox滚动事件细谈
C# 禁止ComboBox滚动事件细谈
|
30天前
简单讲述ondragstart、drag、ondragend、ondragenter、ondragover、ondrop、ondragleave七个与拖拽相关的监听事件,并运用实现拖拽过程放置样式变化
简单讲述ondragstart、drag、ondragend、ondragenter、ondragover、ondrop、ondragleave七个与拖拽相关的监听事件,并运用实现拖拽过程放置样式变化
|
30天前
|
JavaScript 前端开发
js基础——事件(鼠标事件、键盘事件、表单事件......)
js基础——事件(鼠标事件、键盘事件、表单事件......)
35 0
|
30天前
页面监听键盘事件
页面监听键盘事件
|
JavaScript 前端开发 Android开发
Vue中 监听移动端软键盘弹出、收起事件
Vue中 监听移动端软键盘弹出、收起事件
1240 0