移动端常用事件

小灰灰 2023-06-14 04:10 2阅读 0赞

> touchstart 与 click

**touchstart** : 触摸开始事件，当手指接触屏幕上的一刹那，触发该事件。  
**click**: PC端点击事件，在移动端也可以使用，不过会有200ms延迟，一般不建议使用。

var box = document.getElementById("touchstart");
        box.addEventListener("touchstart", function (e) { 
            //e.preventDefault() //阻止鼠标事件触发
           console.log('touchstart'); 
        });
         box.addEventListener("click", function (e) { 
           console.log('click'); 
        });

![在这里插入图片描述][20191118110808593.png]  
看到控制台，touchstart先执行，而click要等一小段时间才执行(肉眼可见)；  
如果不想让click触发，阻止默认事件就可：*e.preventDefault()*

> touchmove

手指在某区域持续滑动，会触发该事件

box.addEventListener("touchmove", function (e){ 
            //do something
    })

使用该事件时切记要做好**函数节流**，毕竟移动端性能有限，函数防抖与节流详见我上篇文章 [函数防抖与节流][Link 1]

> touchend

某区域内触摸事件结束的一刹那触发该事件，或称手指抬起的一瞬间。

// touchend触摸结束
        box.addEventListener("touchend", function (e){ 
            console.log('touchend事件');
        })

> touchEvent

TouchEvent是一个对象，在做移动端业务或功能需求的时候，经常会用到。可以试着打印一下，看它里面有些什么

box.addEventListener('touchstart', function(e) { 
        console.dir(e); // 查看TouchEvent对象的属性和方法
    });

打印结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]  
重点讲一下这三个常用的  
**changedTouches**：一个 TouchList 对象，包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch 对象。**做移动端滑动事件会用到。**

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

**touches**：一 个 TouchList 对象，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否发生了变化。**多指操作，获取多个触点会用到**

[20191118110808593.png]: https://img-blog.csdnimg.cn/20191118110808593.png
[Link 1]: https://blog.csdn.net/qq_35942348/article/details/103113509
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191118112325226.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70