当前位置：首页 > news >正文

8.28 JS移动端事件

news 2025/8/29 15:25:34

学习目标:

能够写出移动端触屏事件
能够写出常见的移动端特效
能够使用移动端开发插件开发移动端特
能够使用移动端开发框架开发移动端特效

PC端事件

鼠标类：click，mouseover，mouseout，mouseleave，mouseenter，mouseup，mousedown

键盘类：keydown，keyup

其他类：blur，focus，change，load 但是对于移动端来说，是不存在鼠标事件和键盘事件的，因为移动端是没有鼠标和键盘的；

移动端事件：

单击事件，双击事件，滑动事件（上滑，下滑，左滑，右滑）
长按事件
摇一摇，重力感应等

案例：鼠标悬浮效果

<style>.box{width: 100px;height: 100px;background-color: red;}.box:hover{background-color: blue;}
</style>
<div class="box"></div>
<script>let box = document.querySelector('.box');let i=0;box.onclick = function(){console.log(++i);}
</script>

这个效果在PC端是没有问题的，但是在移动端，鼠标悬浮的时候，颜色是不会发生改变的；

移动端是没有鼠标的，也没有鼠标悬浮事件；移动端的PC事件也有问题，click在移动端大概有300ms的延迟

触摸事件touch只有移动端才有touch事件

touch事件模型

ontouchstart：触摸开始(当手指触摸屏幕时触发，不管当前有多少只手指)

ontouchmove：触摸后移动(当手指在屏幕上滑动时连续触发，通常我们再滑屏页面，会调用)event.preventDefault()

ontouchend：触摸结束(当手指离开屏幕时触发)

onclick:点击事件 ontouchcancel：系统通知跟踪触摸时候会触发。例如在触摸过程中突然有人打电话过来取消了当前的操作，此时会触发事件，这个事件用的比较少；触摸事件的响应顺序：ontouchsatrt > ontouchmove > ontouchend > onclick 300ms延时

事件案例

<style>.box{width: 80%;border: 1px solid #f00;height: 300px;margin: 0 auto;}
</style>
<div class="box"></div>
<script>var oBox = document.querySelector('.box');oBox.addEventListener('touchstart',function(e){console.log('touchstart');// console.log(e);// 手指开始触摸的位置console.log(e.touches[0].clientX);})oBox.addEventListener('touchend',function(e){console.log('touchend');// 手指结束触摸的位置console.log(e.changedTouches[0].clientX);})oBox.addEventListener('touchmove',function(e){console.log('touchmove');console.log(e.changedTouches[0].clientX);})oBox.addEventListener('click',function(){console.log('click');})
</script>

可以通过开始位置结束位置,可以实现移动端的滑块效果,参考:vant - 表单 - 滑块

移动端为什么不用click

click事件在手机端会出现大概300ms的延迟，实际的执行延迟要比这个大，因为浏览器的内核运行也需要消耗事件。延迟执行的原因是苹果最早在手机上做了一个事件，当双击页面的时候，页面放大，也就是说，在点击页面的300ms之内，如果没有在此触发点击，则认为是单击事件，如果在此触发则认为是双击事件。但目前，一般在手机web中，不允许缩放，也就没有双击事件，但是click延迟执行会影响用户体验；谷歌判断点击的条件是长按呀lang press的事件阀值为700ms，超过700ms就不再触发click事件

去除移动端click300ms延迟

1)meta标签

禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟

<meta name="viewport" content="width=device-width">

即把viewport设置成设备的实际像素，那么就不会有这300ms的延迟，并且这个举动收到了IE/Firefox/Safari（IOS9.3）的支持，也就是说现在的移动端开发可以不用顾虑click会比较迟钝的问题；如果设置为initial-scale=1.0，在chrome上是可以生效，但是Safari不会：

<meta name="viewport" content="initial-scale=1.0">

2)css去除

html{touch-action: manipulation;}

3)fastClick库

截止2015年底，大多数移动浏览器（特别是Chrome和Safari）不再具有300ms的触摸延迟，毕竟再多引入一个js文件对项目也没有什么好处，不推荐使用。

解决原理就是：

当我们手指触摸屏幕，记录当前触摸时间
当我们手指离开屏幕，用离开的时间减去触摸的时间
如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击

![[2d3b60e5-88a6-451f-8e14-be655b871f5f.png]]

touch事件对象

每个touch事件对象包含的属性如下：

clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
identifier：标识触摸的唯一ID。
target：触摸的DOM节点目标。
targetTouches：当前对象上所有触摸点的列表数组
changeTouches：涉及当前(引发)事件的触摸点的列表数组，常用于手指离开的事件，手指都离开屏幕之后，touches和targetTouches中将不再有值，targetTouches还会有一个只，此值为最后一个离开屏幕的手指的触摸点。