11

移动端touch拖动事件和click事件冲突问题解决 - 甜点cc

 2 years ago
source link: https://www.cnblogs.com/all-smile/p/16737216.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

移动端touch拖动事件和click事件冲突问题解决 - 甜点cc - 博客园

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

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

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

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

1037867-20220928104646876-390640521.png

我是 甜点cc

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

希望能和大家一起努力营造一个良好的学习氛围，为了个人和家庭、为了我国的互联网物联网技术、数字化转型、数字经济发展做一点点贡献。数风流人物还看中国、看今朝、看你我。

__EOF__

本文作者： 甜点cc 本文链接： https://www.cnblogs.com/all-smile/p/16737216.html 关于博主： 评论和私信会在第一时间回复。或者直接私信我。 版权声明： 原创文章，版权归作者个人所有，转载请务必联系我（右下角有微信名片，也可以在平台私信我😊） 声援博主： 如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK