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

2022-09-28 00:00:00 事件 拖动 触摸 悬浮 触点

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

实现效果

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

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

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

准备

  1. 移动端使用 touch事件类型：

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

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

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

  • touchcancel终止触摸事件

多点触控

  1. TouchEvent.targetTouches 只读

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

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

相关文章