共计 1253 个字符，预计需要花费 4 分钟才能阅读完成。
通过一个悬浮球交互性能的案例来论述问题，以及解决办法。
实现成果
相似微信里的悬浮窗成果，苹果手机的悬浮球性能成果
- 能够点击拖动，而后吸附在窗口边缘
- 点击悬浮球，能够跳转界面，或者更改悬浮球的状态
筹备
- 挪动端应用
touch事件类型：
touchstart当用户在触摸立体上搁置了一个触点时触发（手指放到屏幕上）touchmove当用户在触摸立体上挪动触点时触发（手指在屏幕上滑动）touchend当一个触点被用户从触摸立体上移除（抬起手指）touchcancel终止触摸事件
多点触控
TouchEvent.targetTouches只读
一个 TouchList 对象，是蕴含了如下触点的 Touch 对象：触摸起始于以后事件的指标 element 上，并且依然没有来到触摸立体的触点。
视口处于第四象限，原点在左上角
event.targetTouches.clientX // 触摸元素横坐标
event.targetTouches.clientY // 触摸元素纵坐标TouchEvent.touches只读
一个 TouchList 对象，蕴含了所有以后接触触摸立体的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否产生了变动。
实现
通过设置悬浮球定位款式，拖动的时候计算坐标，而后动静的批改悬浮球的定位偏移量，联合 transtion 过渡成果，实现平滑的过渡
代码比较简单，就不贴了。
问题
当给元素增加了 touch 事件之后，click事件就不会登程了，那么怎么模仿点击成果呢？
剖析
在不理解触摸事件响应机制的时候，你可能会从计算触摸指标元素的时长或者计算触摸起始地位来断定点击行为，然而这两种形式都不是最佳的，起因有以下几点：
- 计算触摸时长比拟麻烦
- 判断挪动间隔不谨严，有可能拖动了一圈又回到初始地位
- 联合计算触摸时长和触摸元素起始地位两种形式，逻辑比较复杂
上面看我是怎么做的：
首先应该理解触摸行为的事件响应机制：
- 如果有拖动行为，事件执行秩序为：
touchstart->touchmove->touchend - 没有拖动行为，事件执行秩序为：
touchstart->touchend
从下面的剖析来看，咱们能够从 touchmove 动手，持续往下看👇
解决
- 在
touchmove事件中减少一个是否挪动过的标记isMoved: true - 在
touchend事件中判断isMoved是否为true，是true则按原有逻辑执行，是false则阐明没有挪动过，属于点击行为 - 在
touchend事件最初，重置isMoved为初始值false，这样每一个触摸操作都能够进入同样的逻辑，不必放心状态凌乱
完满解决模仿点击行为🎉🎉
我是 甜点 cc
酷爱前端，也喜爱专研各种跟本职工作关系不大的技术，技术、产品趣味宽泛且浓重，期待着一个守业机会。本号次要致力于分享集体经验总结，心愿能够给一小部分人一些渺小帮忙。
心愿能和大家一起致力营造一个良好的学习气氛，为了集体和家庭、为了我国的互联网物联网技术、数字化转型、数字经济倒退做一点点奉献。数风流人物还看中国、看今朝、看你我。
正文完
