Vite开发阶段发生了什么？

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

实现效果

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

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

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

• touchstart当用户在触摸平面上放置了一个触点时触发 （手指放到屏幕上）* touchmove当用户在触摸平面上移动触点时触发 （手指在屏幕上滑动）* touchend当一个触点被用户从触摸平面上移除（抬起手指）* touchcancel终止触摸事件> 多点触控

2.TouchEvent.targetTouches 只读

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

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

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

3.TouchEvent.touches 只读

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

实现

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

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

问题

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

分析

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

1.计算触摸时长比较麻烦2.判断移动距离不严谨，有可能拖动了一圈又回到初始位置3.结合计算触摸时长和触摸元素起始位置两种方式，逻辑比较复杂下面看我是怎么做的：

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

• 如果有拖动行为，事件执行次序为：touchstart-> touchmove-> touchend* 没有拖动行为，事件执行次序为：touchstart-> touchend从上面的分析来看，我们可以从touchmove 入手，继续往下看👇

解决

1.在touchmove事件中增加一个是否移动过的标记isMoved: true2.在touchend事件中判断isMoved是否为true，是true则按原有逻辑执行，是false则说明没有移动过，属于点击行为3.在touchend事件最后，重置isMoved为初始值false，这样每一个触摸操作都可以进入同样的逻辑，不用担心状态混乱完美解决模拟点击行为🎉🎉

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取