• 38.移动端常用事件

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

    目录

    1  触摸事件 touch

    1.1  触摸到元素时触发 touchstart

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

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

    2  触摸事件对象 TouchEvent

    2.1  手指触摸屏幕列表 touches

    2.2  手指触摸元素列表 targetTouches

    2.3  触点改变列表 changeTouches

    3  移动端拖动元素案例

    3.1  我写的

    3.2  视频的

    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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         * {
    10.             padding: 0px;
    11.             margin: 0px;
    12.         }
    13.         div {
    14.             position: absolute;
    15.             width:200px;
    16.             height:200px;
    17.             background-color: cyan;
    18.         }
    19.     style>
    20. head>
    21. <body>
    22.     <div>div>
    23. body>
    24. <script>
    25.     div = document.querySelector('div')
    26.  
    27.     function move(e) {
    28.         e.preventDefault()
    29.         x = (e.targetTouches[0].clientX-div.offsetWidth/2).toString() + 'px'
    30.         y = (e.targetTouches[0].clientY-div.offsetHeight/2).toString() + 'px'
    31.         div.style.left = x
    32.         div.style.top = y
    33.     }
    34.  
    35.     div.addEventListener('touchmove',function(e) {
    36.         move(e)
    37.         })
    38. script>
    39. html>

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

    需要注意的点有三个

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

    3.2  视频的

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         * {
    10.             padding: 0px;
    11.             margin: 0px;
    12.         }
    13.         div {
    14.             position: absolute;
    15.             width:200px;
    16.             height:200px;
    17.             background-color: cyan;
    18.         }
    19.     style>
    20. head>
    21. <body>
    22.     <div>div>
    23. body>
    24. <script>
    25.     div = document.querySelector('div')
    26.  
    27.     startX = 0
    28.     startY = 0
    29.     x = 0
    30.     y = 0
    31.  
    32.     div.addEventListener('touchstart',function(e) {
    33.         startX = e.targetTouches[0].pageX
    34.         startY = e.targetTouches[0].pageY
    35.         x = this.offsetLeft
    36.         y = this.offsetTop
    37.     })
    38.  
    39.     div.addEventListener('touchmove',function(e) {
    40.         e.preventDefault()
    41.         moveX = e.targetTouches[0].pageX - startX
    42.         moveY = e.targetTouches[0].pageY - startY
    43.         this.style.left = x + moveX + 'px'
    44.         this.style.top = y + moveY + 'px'
    45.     })
    46. script>
    47. html>
    48.
    • startX,startY,x,y可以不在一开始赋值为0，经测试不影响使用

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

  • 相关阅读:
    ROS2初级知识（8）：Launching启动多节点
    Android Glide判断图像资源是否缓存onlyRetrieveFromCache，使用缓存数据，Kotlin
    Go基础-2
    json转换
    jQuery - 获取内容和属性
    Win11怎么连接宽带？
    跳台阶游戏(Python排列组合函数itertools.combinations的应用)
    excel表格怎么换行？单元格内换行的4个方法
    osg实现自定义插件读取自定义格式的模型文件到场景
    第一个SpringBoot项目
  • 原文地址：https://blog.csdn.net/potato123232/article/details/126287455