38.移动端常用事件_移动端事件-CSDN博客

本文链接：https://blog.csdn.net/potato123232/article/details/126287455

PC端上的部分事件同样使用与移动端，比如点击事件

1 触摸事件 touch

1.1 触摸到元素时触发 touchstart

1.2 在元素内滑动开始时触发 touchmove

1.3 触摸到元素后把手抬起来后触发 touchend

2 触摸事件对象 TouchEvent

2.1 手指触摸屏幕列表 touches

2.2 手指触摸元素列表 targetTouches

2.3 触点改变列表 changeTouches

4.2 用touch事件封装一个函数模拟点击

4.3 使用fastclick插件

1 触摸事件 touch

1.1 触摸到元素时触发 touchstart

与上面提到的click触发条件相同

1.2 在元素内滑动开始时触发 touchmove

在开始滑动(按住后手指产生位移)的一瞬间就会触发，如果你仅仅碰到这个元素而没用按住是不触发的

滑动时会不停触发

1.3 触摸到元素后把手抬起来后触发 touchend

touchstart与touchend是相对的，touchstart相当于鼠标按下后立即触发，touchend相当于鼠标按下后弹起时触发

只要在元素内按下，无论移动到哪里抬起，都会触发这个事件

2 触摸事件对象 TouchEvent

事件中包含这很多的属性

我们下面介绍一下常用的属性

2.1 手指触摸屏幕列表 touches

注意这里是屏幕而非元素，当你触发了指定事件后，touches会统计所有在屏幕上的触点

列表中会出现若干个手指对象，如果你的触点只有一个，那就只有一个对象，如果有多个，那么就会有多个对象

对象中记录该触点的一些信息，比如位置信息(clientX,clientY)，位置信息与鼠标事件对象中的属性含义相同

不知道鼠标事件对象的可以看一下这个25. PC端常用事件_Suyuoa的博客-CSDN博客

2.2 手指触摸元素列表 targetTouches

注意这里是元素而不是屏幕，即使屏幕上有多个触点但是不在元素中，那targetTouches是不会统计到的

2.3 触点改变列表 changeTouches

changeTouches的作用对象既不能说是元素也不能说是屏幕，changeTouches会记录与绑定事件有关联的触点，比如你设置了touchend事件，然后在元素中按下，之后拖到元素外抬起，一样会触发该事件

changeTouches不会获取全部的手指列表，只会获取变化的手指列表，比如你手指从没按下到按下，手指从按下到离开，如果有这种动作，会在changeTouches记录下来

在我们使用touchend时可以看出来changeTouches的效果，因为我们使用一根手指，在手指离开的时候就没有正在触摸的手指了

第一个是targetTouches，第二个是changedTouches

下面是在元素内按下，然后在元素外抬起的情况

3 移动端拖动元素案例

原理与代码都与鼠标拖动事件类似，感兴趣可以看一下 25. PC端常用事件_Suyuoa的博客-CSDN博客一张跟随鼠标的图像

3.1 我写的

我这里写的和视频中将的不太一样，感兴趣可以看一下视频 23-移动端拖动元素_哔哩哔哩_bilibili P334

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        div {
            position: absolute;
            width:200px;
            height:200px;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script>
    div = document.querySelector('div')

    function move(e) {
        e.preventDefault()
        x = (e.targetTouches[0].clientX-div.offsetWidth/2).toString() + 'px'
        y = (e.targetTouches[0].clientY-div.offsetHeight/2).toString() + 'px'
        div.style.left = x
        div.style.top = y
    }

    div.addEventListener('touchmove',function(e) {
        move(e)
        })
</script>
</html>

经测试发现可以拖动，且屏幕的显示区域不会随着拖动元素而变化

需要注意的点有三个

移动的元素要加定位
targetTouches要加索引，索引了某一个具体的触点才能使用clientX这种属性。索引用0就行了，无论几个手指放上，只有第一个生效
在我们用手指拖动元素的时候，屏幕的位置也会跟着移动，我们需要加上e.preventDefault()来阻止该事件对屏幕可见区域的影响

3.2 视频的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        div {
            position: absolute;
            width:200px;
            height:200px;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script>
    div = document.querySelector('div')

    startX = 0
    startY = 0
    x = 0
    y = 0

    div.addEventListener('touchstart',function(e) {
        startX = e.targetTouches[0].pageX
        startY = e.targetTouches[0].pageY
        x = this.offsetLeft
        y = this.offsetTop
    })

    div.addEventListener('touchmove',function(e) {
        e.preventDefault()
        moveX = e.targetTouches[0].pageX - startX
        moveY = e.targetTouches[0].pageY - startY
        this.style.left = x + moveX + 'px'
        this.style.top = y + moveY + 'px'
    })
</script>
</html>

startX,startY,x,y可以不在一开始赋值为0，经测试不影响使用

效果要比我写的好，我写的每次的抓取点就会抓取物体中心，使用视频中的写法可以抓取物体任意点

4 click延时问题

在移动端中click事件会有300ms的延时，这个延时是因为在你放大或缩小页面的某个部分的时候，300ms内双击屏幕会使页面变为原来的大小

我们有几种方式可以取消click的延时

4.1 禁用缩放

我们可以在视口中加入user-scalable=no禁用屏幕缩放，这样就可以取消click事件的延时

这个我们在视口中提到过，感兴趣的话可以看一下这个 34. 视口 viewport_Suyuoa的博客-CSDN博客_viewport视口

4.2 用touch事件封装一个函数模拟点击

如果触摸手指从抬起到放下小于150ms，且没有移动，我们就认为此次触摸为一次点击

<script>
    function tap (obj,callback) {
        var isMove = false
        var startTime = 0
        obj.addEventListenter('touchstart',function() {
            startTime = Date.now()
        })
        obj.addEventListenter('touchmove',function() {
            isMove = true
        })
        obj.addEventListenter('touchend',function() {
            if(!isMove && (Date.now() - startTime) <150) {
                callback && callback()
            }
            isMove = false
            startTime = 0
        })
    }

    tap(obj,function() {})
</script>