首页 > 其他分享 >移动端 Touch 事件梳理和踩坑

移动端 Touch 事件梳理和踩坑

时间:2023-11-20 13:23:08浏览次数:29  
标签:触发 touchend 触摸 事件 Touch 屏幕 移动 梳理

前言

在移动端开发中,几乎无法避免 Touch 事件,然而每次遇到 Touch 事件,今天一起来梳理一下 Touch 事件的相关内容和踩坑总结吧!

Touch 事件基础

TouchEvent

touchstart:当手指触摸屏幕的时候触发,即使已经有一个手指放在屏幕上也会触发

touchmove:当手指在屏幕上滑动的时候连续地触发

touchend:当手指从屏幕上离开的时候触发

touchcancel:当一个或多个触摸点以特定于实现的方式被中断(例如,创建了太多触摸点)

TouchList

touches:当前屏幕上所有触摸点的集合列表

targetTouches:绑定事件的元素上的触摸点的集合列表

  • 这个属性通常用来判断是否有手指触摸了某个元素,并且可以用来做一些与之相关的交互

changedTouches:触发事件时改变的触摸点的集合

  • 对于 touchstart 事件,列出在此次事件中新增加的触点
  • 对于 touchmove 事件,列出和上一次事件相比较,发生了变化的触点
  • 对于 touchend ,列出离开触摸平面的触点
js复制代码    // touchend 触发时
    e.touches[0] // undefined
    e.changedTouches[0] // TouchEvent

 

标签:触发,touchend,触摸,事件,Touch,屏幕,移动,梳理
From: https://www.cnblogs.com/heibaiqi/p/17843719.html

相关文章

  • UNIAPP 钉钉微应用调试 PC端移动端调试钉钉微应用H5
    https://open.dingtalk.com/document/resourcedownload/micro-application-four-terminal-debugging-tool-web-edition 流程可以参考钉钉文档https://open-dev.dingtalk.com 钉钉开放平台登录      在项目的template.h5.html中的<head>里塞入<scriptsrc="https:......
  • 数组相关知识的梳理
    数组相关知识的梳理一维数组定义inta[100];inta[]={1,2,6,5};总之,要让计算机识别出要给定义的数组多少的容量输入与输出多多使用循环结构输入Eg.inti,a[100];charch;for(i=0;i<=l0;i++){scanf("%d%c",&a[i],&ch);}输出Eg.for(i=0;i<=10;i++)......
  • JS特效:跟随鼠标移动的小飞机
    前端网页中,用JS实现鼠标移动时,页面中的小飞机向着鼠标移动。效果源码<!DOCTYPEhtml><html><head><style>*{margin:0;padding:0;}body{height:100vh;background:linear-gradient(200deg,#005bea,#00c6fb);}......
  • 11.1 文件拷贝移动与删除
    在编程中,针对磁盘与目录的操作也是非常重要的,本章将重点介绍如何实现针对文件目录与磁盘的操作方法,其中包括了删除文件,文件拷贝,文件读写,目录遍历输出,遍历磁盘容量信息,磁盘格式化,输出分区表数据,监控目录变化等。11.1CopyFileCopyFile函数,用于将一个文件从一个位置复制到另一个......
  • 【第25章】移动应用安全需求分析与安全保护工程
    25.1移动应用安全威胁与需求分析25.1.1移动应用系统组成包括三个部分:一是移动应用,简称App;二是通信网络,包括无线网络、移动通信网络及互联网;三是应用服务端,由相关的服务器构成,负责处理来自App的相关信息或数据。25.1.2移动应用安全分析移动应用的安全威胁主要有以下......
  • 第五代移动通信技术(5G)
    定义:是最新一代蜂窝移动通信技术,4G(LTE-A、WiMax)、3G(UMTS、LTE)和2G(GSM)的延伸 目标:高数据速率(最高可达10Gbit/s,比4GLTE蜂窝网络快100倍)、减少延迟(低于1毫秒,4G为30-70毫秒)、节省能源、降低成本、提高系统容量和大规模设备连接特点:峰值速率需要达到Gbit/s的标准(VR)、空中接口......
  • 移动端踩坑
    1、窗口等比例缩放constdesignWidth=375constscale=document.documentElement.clientWidth/designWidthletviewport=document.querySelector('meta[name='viewport']')letcontent='width=device-width'+',initial-scale='......
  • 移动硬盘安装Ubuntu
    说明​ 由于学业需要,自己需要一个Ubuntu系统,但不想在原本容量就不多的硬盘上再一次分区来制作双系统,同时如果使用虚拟机来达到双系统的目的也未尝不可。但在虚拟机上的系统调用到GPU的话,就不得不涉及到穿透的各项问题,由于自己人菜还懒,觉得这过于麻烦,不如直接制作一个外接的系统。......
  • MV移动和CP复制
    mv基本概述mv命令来自英文单词”move“的缩写,中文译为”移动“,其功能与英文含义相同,能够用于对文件进行剪切和重命名操作。这是一个被高频使用的文件管理命令,我们需要留意它与复制命令的区别。cp命令是用于文件的复制操作,文件个数是增加的,而mv则为剪切操作,也就是对文件进行移动(......
  • vi移动光标的常用快捷键
    点击查看代码1、h:光标左移一个字符2、k:光标上移一个字符3、j:光标下移一个字符4、l:光标右移一个字符5、0:光标移至行首6、$:光标移至行尾7、H:光标移至屏幕首行8、M:光标移至屏幕中间9、L:光标移至屏幕最末行10、G:跳转到文件的末尾行11、gg:跳转到文件的首行......