HTML5滑动(swipe)事件,移动端触摸(touch)事件

2023-11-10

目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现。

但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touchmove,touchend。

项目需求,需要用到拖动事件。由于不需要考虑IE8等低端浏览器的兼容性, 所以想到HTML5中的drag事件, 发现移动端 android & IOS并不支持 drag事件。现在让我们来介绍一下移动端的常用事件吧

一、click点击事件

单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟。

二、touch触摸事件

触摸事件,有touchstart touchmove touchend touchcancel 四种之分,常用的有:

touchstart:当有新手指触控到绑定的元素,会触发一次事件。

touchmove:当有手指放绑定的元素上会一直触发,从触发条件准确的说只有手指移动时才触发。但是经过测试,这一项检测十分灵敏,人为手指保持不动,系统也会侦测到细小的移动。所以会一直触发。

touchend:当有手指从绑定元素上抬起,会触发一次。

touchcancel:可由系统进行的触发(不常用事件),比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件。

2.1事件列表

在移动端中上面的三个触摸事件每个事件都有以下列表

changedTouches:保存了所有引发事件的手指信息</

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML5滑动(swipe)事件,移动端触摸(touch)事件 的相关文章

  • 如何在右键新建中添加新建xmind文件

    如何在右键新建中添加新建xmind文件 导语 现在总是要写思维导图 所以希望新建的时候更方便快捷一点 不用打开软件新建才能选择新建文件之后文件的位置 于是就开始想能不能想Word文档一样直接鼠标右键新建处就可以有新建Word文档那样 方便的
  • KMP算法-时间复杂度分析

    KMP算法 假设m为模式串strM的长度 n为待匹配的字符串strN的长度 KMP的基本过程 求模式串strM的next数组 遍历比较待匹配的字符串strN 过程 遍历strN 遍历时出现strM j 的回跳 比较strN i strM j
  • 闲聊ROOT权限——ROOT权限的前世今生

    最近工作一直很忙 竟然慢慢地疏远了CSDN的博客 然而在工作中遇到问题 又会被多次的引导至CSDN 故笔者抽空也将自己学习的成果与大家分享在这里 希望能帮助到需要帮助的人 本文将从几个方面 由浅至深地讲述ROOT到底是什么东西 一 ROOT
  • python2.x脚本转换为python3.x脚本方法详细步骤与实践分享

    1 安装python3 x 2 设置python环境变更 将C Python36 Scripts C Python36 追加加到系统变更PATH中 注 C Python36为安装路径 若不一致请更换成你的安装路径 3 找到2to3 py脚本
  • java环境能加快matlab运行吗,花了一天,解决java调用matlab

    鉴于labview做不了web labview强项在于硬件仪器控制 可能也可以做web 还不会 虽然有web发布工具 但是基于远程前面板 最后效果都呈现在前面板上 涉及了跳转页面 matlab绘图等只在服务器端上显示的问题 因此 打算用ja
  • 支付通道简述

    1 苹果内购流程图 官方文档 简体中文文档 Apple Developer 苹果内购没有通知 需要前端调用后端接口 通知后端支付成功 订单号由前端提供 后端通过订单号处理业务逻辑 返回值示例 苹果服务器验证后的返回值文档地址 respons
  • js写一个简单的计算机,js实现一个简易计算器

    本文实例为大家分享了JS实现简易计算器的具体代码 供大家参考 具体内容如下14th test 这是一个标题 以下是一个简易计算器 第一个数 第二个数 var res 保存计算结果 function add var first documen
  • linux动态链接库的编译和使用

    文章目录 1 动态链接库的编译 2 可执行程序的编译 3 运行可执行程序 4 设置动态库查询目录 方法一 更改环境变量LD LIBRARY PATH 方法二 通过 Wl rpath编译链接选项指定 方法三 修改配置文件 etc ld so
  • 互联网企业使用云计算,有什么优势?

    现如今 上云已经成为企业发展过程中不可逆转的历史潮流趋势 如今 越来越多的企业开始采用云计算 因为它会给企业带来很多惊人的好处 云计算不仅可以降低企业成本 提高灵活性和弹性 还能优化资源的利用 从而提企业高竞争力 自动软件更新 许多公司及其
  • 2021.08.28-MMsegmentation0.16.0+Cuda10.1+Ubuntu16.04+Pytorch1.8环境安装

    个人在目标检测方向的学习比较深入 但在深度学习的图像处理中 语义分割也是一个很重要的方向 所以也想一探究竟 熟悉一下基本流程和工作原理 现打算在LINUX系统Ubuntu16 04上安装mmsegmentation框架 因为之前主要使用mm
  • 百度地图JavaScript API开发GIS服务

    百度地图JavaScript API是由JavaScript语言编写的应用程序接口 支持HTTP和HTTPS 免费对外开放 在使用前 需先申请密钥 ak 才可使用 主要分为两种类型的版本 JavaScript API GL 使用了WebGL
  • map erase 内存释放问题

    资料出处 http www cnblogs com goodness archive 2012 05 16 2503832 html 研究了下c 中map的内存占用情况 很多人说map中的erase以及clear不能释放内存 这几天实验了下
  • 多态介绍。

    Override 规范上 推荐加上 帮你校验是否是方法重写 方法重写在子类继承了父类的方法之后 如果发现在当前的需求下 父类的方法不够强大 所以在子类中就可以对此方法进行重写 特点 1 方法名相同 2 参数列表相同 3 返回值类型不能大于父
  • Python绘制时间序列数据的时序图、自相关图和偏自相关图

    时序图 自相关图和偏相关图是判断时间序列数据是否平稳的重要依据 本文涉及的扩展库numpy pandas statsmodels一般可以使用pip进行在线安装 如果安装失败 可以到http www lfd uci edu gohlke py
  • [Luogu] P1438 无聊的数列

    题目背景 无聊的 YYB 总喜欢搞出一些正常人无法搞出的东西 有一天 无聊的 YYB 想出了一道无聊的题 无聊的数列 K峰 这题不是傻X题吗 题目描述 维护一个数列 a i a i ai 支持两种操作 1 l r K D 给出一个长度等于
  • java 接口类与抽象类

    接口可以继承接口 抽象类可以实现 implements 接口 但不可以继承自接口 抽象类可以继承具体类 抽象类中可以有静态的 main 方法 抽象类里可以有抽象方法 抽象方法一定要在抽象类里 抽象类可以派生 抽象类的父类可以是非抽象类 某一
  • XSS之xss-labs-level5

    文章目录 0x01 XSS Labs 0x02 实验工具 0x03 实验环境 0x04 实验步骤 0x05 实验分析 0x06 参考链接 0x01 XSS Labs XSS 跨站脚本攻击 是指恶意攻击者往Web页面里插入恶意Script代码
  • 递归对比对象函数

    在JavaScript中 对象之间的比较通常通过引用进行 当你使用 运算符比较两个对象时 它会检查它们是否引用了同一个内存地址 而不是逐个比较对象的属性 上图可见 obj1和 是两个不同的对象 尽管它们具有相同的结构 都是空对象 因此 使用
  • vue项目使用vue-video-player实现视频直播功能

    文章目录 引言 一 基本使用 1 播放mp4 2 options常用属性 3 常用事件 二 使用videojs contrib hls播放m3u8 三 视频链接测试工具 potplayer 引言 随着互联网的快速发展 视频直播已经成为了越来

随机推荐

  • [C++]拷贝(复制)构造函数

    拷贝 复制 构造函数 拷贝构造函数是一种特殊的构造函数 其形参为本类的对象引用 形式如下 class 类名 public 类名 形参 构造函数 类名 类名 对象名 拷贝构造函数 拷贝构造函数实例 include
  • C语言程序设计--学生信息管理系统

    题目 学生信息管理系统 1 系统设计 1 1设计要求 1 1 1设计任务 创建一个学生信息管理系统 让它来运行和管理学生信息 进行对学生学号 姓名 性别 年龄 出生年月日 住址 电话 E maill等信息的管理 1 1 2性能指标要求 程序
  • 刷脸支付随刷随走用户体验更好

    目前不管是商铺还是银行 又或者是交通等领域都已实现刷脸支付应用 我们的社会已经初步进入了靠脸吃饭的时代 相信很多用户都很是好奇 扫码支付才盛行不久 而且也非常的方便实用 为什么刷脸支付才刚入市 就大有取代扫码支付的趋势呢 其实很简单 刷脸支
  • idea编译级别设置

    方法一 File gt Project Structure gt Project File gt Settings gt Build Execution Deployment gt Compiler gt Java Compiler 方法二
  • sqli-labs26

    文章目录 一 审查源码 1 判断注入点和闭合方式 2 过滤方式 二 SQL注入 1 获取数据库 2 获取数据表 3 获取字段 双写绕过 anandd 大小写绕过And 括号绕过 ASCII编码绕过 20 0a绕过 内联注释 替换 如 and
  • 蓝桥杯提交代码每次都是运行出错,但自己在编辑器上运行没问题...

    问题描述 自己在eclipse上面跑的java题目是完全可以编译运行的 但是提交到系统中却一直是运行错误 检查了好久觉得自己没有哪里写错 解决办法 最后发现是自己给不同的题目分了类放在了不同的包下面 提交代码的时候没有把引入的包名注释掉 因
  • 移动BI应该怎么规划?每一个数据产品经理必看

    在移动化 大数据浪潮的今天 基于数据做决策应该是每一家公司的标配 每家公司都有专门负责数据的人 也都应该有一个BI部门 而移动BI 基于手机端随时随地进行数据查询和分析 更是BI中不可或缺的一部分 那么移动BI怎么做 我们按照 用户体验要素
  • 链式输送机传动装置设计(说明书+CAD图纸+PPT)

    摘要 齿轮传动是应用极为广泛和特别重要的一种机械传动形式 它可以用来在空间的任意轴之间传递运动和动力 目前齿轮传动装置正逐步向小型化 高速化 低噪声高可靠性和硬齿面技术方向发展 齿轮传动具有传动平稳可靠 传动效率高 一般可以达到94 以上
  • Qt中opengl使用swapBuffers()函数报错解决办法

    swapBuffers qt文档中方的翻译 用屏幕外缓冲区交换屏幕内容 仅当窗口小部件的格式指定双缓冲模式时 此方法才有效 通常 不需要显式调用此函数 因为它是在每个小部件重新绘制后 即每次执行paintGL 之后 自动完成的 我是在线程中
  • Visual Studio(VS) 编程推荐字体及设置

    菜单栏 工具 选项 选择Consolas就是最常见的编码字体了 在这个字体下的中英文标点和半角圆角符号也能有比较明显的区别
  • YARN之Container-什么是Container?

    在最基本的层面上 Container是单个节点上如RAM CPU核核磁盘等物理资源的集合 单个节点上 或者单个大节点 可以有多个Container 系统中的每个节点可以认为是由内存 如512MB或者1GB 和CPU的最小容量的多个Conta
  • gin-巧用Context传递多种参数

    目录 引言 1 巧妙包装gin Context为NewContext 2 在使用gin Use对每一个请求的Context进行组装 3 在路由绑定时解析出NewContext来为应用层函数提供参数 并且调用应用层函数 4 总结 引言 首先给
  • wget

    参考 http apple stackexchange com questions 100570 getting files all at once from a web page using curl 一份份的下载文件有点麻烦 所以 wg
  • 数据结构之图:邻接矩阵和邻接表、深度优先遍历和广度优先遍历

    简介 线性表是一种线性结构 除了头结点和尾节点 线性表的每个元素都只有一个前取节点和一个后继节点 而树结构则相较于线性表更加复杂 它描述的关系为数据元素之间的父子关系 也是现实世界父子关系的缩影 一个父亲节点可以有零个或者多个子节点 而每个
  • 解决tensorflow没有compat的问题

    经过我多年的产bug经验判断 一般这种情况出现在anaconda下载的tensorflow2 x版本中 如果知道自己的tensorflow环境地址的话可以进去检查一下当前版本的tensorflow缺以下哪几个包 不知道也没关系 直接无脑下载
  • 机器学习-GBDT

    GBDT gbdt是一种以CART树 通常 为基分类器的boosting算法 大家可以仔细查一下boosting的介绍 这里不再赘述 gbdt通过多轮迭代 每轮迭代产生一个弱分类器 每个分类器在上一轮分类器的残差基础上进行训练 对弱分类器的
  • @apinote_新的Javadoc标签@ apiNote,@ implSpec和@implNote

    apinote 如果您已经在使用Java 8 则可能会看到一些新的Javadoc标签 apiNote implSpec和 implNote 他们怎么了 如果要使用它们 该怎么办 总览 该帖子将快速查看标签的来源和当前状态 然后 它将解释它们
  • R语言中基本图形的绘制

    条形图 简单的垂直条形图和水平条形图 函数barplot gt library vcd 载入需要的程辑包 grid gt counts lt table Arthritis Improved gt counts None Some Mark
  • matlab插值:拉格朗日插值

    拉格朗日插值即对所要插值的函数进行拉格朗日多项式拟合 这是matlab插值系列的第二期 第一期 数值分析拟合 Matlab三次样条插值拟合数据 以后会有时间的时候再更新更多的插值方法 这篇文章我推导过程参考过了一些其他文章 代码是自己写的
  • HTML5滑动(swipe)事件,移动端触摸(touch)事件

    目有个交互需要实现手指滑动的交互 pc端使用mousedown mousemove mouseup监听实现 但在ios设备上mousemove是不好监听的 同类的方法是touchstart touchmove touchend 项目需求 需