移动端的多指事件以及原生JS封装通用多指事件

最新推荐文章于 2023-04-03 00:45:22 发布

ClingJA

最新推荐文章于 2023-04-03 00:45:22 发布

阅读量754

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javaScipt 移动端触摸事件封装多指事件

本文链接：https://blog.youkuaiyun.com/weixin_37632943/article/details/96428193

本文探讨了移动端，尤其是iOS上的多指事件，包括旋转和缩放比例等特性，并介绍了如何封装一个适用于安卓的多指触摸事件函数。通过获取元素、设定初始状态并调用特定函数，实现跨平台的多指交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端的多指事件以及用原生JS封装通用多指事件

IOS的多指事件

事件类型：

gesturestart: 手指触碰当前元素，屏幕上有两个或者两个以上的手指
gesturechange:手指触碰当前元素，屏幕上有两个或者两个以上的手指位置在发生移动。
gestureend:在gesturestart后, 屏幕上只剩下两根以下（不包括两根）的手指

Event额外新增的属性

属性 rotation : 表示手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转。

属性scale :表示发生多指触摸事件的元素随着手指之间距离变大而增长得比例。

封装可以在安卓端使用的多指事件函数

(function (w) {
   
   
w.gesture = function (ele,callback) {
   
   
        let isStart = false;
        ele.addEventListener('touchstart',function (event) {
   
   
            if(event.touches.length >= 2){
   
   
                isStart = true ;
                //记录两个触点间的初始距离
                this.startDistance =getDistance(event.touches[0],event.touches[1]);

                //记录两个触点的初始角度