JS之移动端触屏事件

在我们PC端中有许多的事件,那我们在移动端有没有事件呢?让我为大家介绍一下移动端常用的事件,触屏事件
触屏事件 touch (也称触摸事件),Android 和IOS 都有
touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。

常见的触屏事件

触屏touch事件说明
touchstart手指触摸到一个 DOM 元素时触发
touchmove手指在一个 DOM元素上滑动时触发
touchend手指从一个 DOM元素上移开时触发

touchstart

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box {width: 400px;height: 400px;background-color: red;}</style>
</head>
<body><div class="box"></div>
</body>
<script>const div = document.querySelector(".box")div.ontouchstart = function(){console.log("触摸了一下")}
</script>
</html>

请添加图片描述

touchmove

    const div = document.querySelector(".box")div.ontouchmove = function(){console.log("一直在触摸")}

请添加图片描述

touchend

    const div = document.querySelector(".box")div.ontouchend = function(){console.log("触摸结束")}

请添加图片描述

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/224198.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入理解CANopen通信协议:CAN-ID、COB-ID与节点ID的协同工作

深入理解CANopen通信协议&#xff1a;CAN-ID、COB-ID与节点ID的协同工作 引言 在现代工业自动化和控制系统中&#xff0c;CANopen协议因其卓越的通信效率和出色的灵活性而备受推崇。本文旨在探讨CANopen中CAN-ID、COB-ID及节点ID的结构和作用&#xff0c;深入解析这些组件如何…

【SpringCloud笔记】(8)服务网关之GateWay

GateWay 概述简介 官网地址&#xff1a; 上一代网关Zuul 1.x&#xff1a;https://github.com/Netflix/zuul/wiki&#xff08;有兴趣可以了解一下&#xff09; gateway&#xff1a;https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.2.1.RELEASE/reference/…

PyQt5和Qt designer的详细安装教程

Qt designer界面和所有组件功能的详细介绍参考&#xff1a;https://blog.csdn.net/qq_43811536/article/details/135186862?spm1001.2014.3001.5501 目录 0. 写在前面1. Anaconda创建虚拟环境2. 安装PyQt5和Qt designer3. 测试安装成功 0. 写在前面 Qt Designer是Qt提供的一种…

巅峰画师Midjourney:新时代的独角兽

介绍 AI绘画领域中&#xff0c;Midjourney处于绝对地位&#xff0c;并且一年时间就登顶。 Midjourney是一家独立的AI研究实验室,探索新的思维媒介,拓展人类的想象力。 它由一个小型的自筹资金团队组成,专注于设计、人类基础设施和AI。 在AI绘画领域,Midjourney取得了非常突出…

定义一个二维数组并输入数据,将二维数组元素的值按升序排列,并输出排序后的二维数组。

目录 问题&#xff1a; 回顾&#xff1a; 给出两种做法&#xff1a; 解法一&#xff1a;调用qsort 函数进行排序 代码&#xff1a; 运行结果&#xff1a; 解法二&#xff1a;冒泡排序 代码&#xff1a; 运行结果: 回顾里的4种方法的模板参考&#xff1a; 1.冒泡排序…

裸机开发(1)-汇编基础

文章目录 GNU汇编语法常用汇编指令处理器内部数据传输指令存储器访问指令压栈和出栈指令跳转指令算术指令逻辑运算指令实战 函数发生调用时&#xff0c;需要进行线程保护&#xff0c;简单来说&#xff0c;就是先进行压栈操作&#xff0c;将调用函数参数、返回值等存到R0-15寄存…

【GoLang】Go语言几种标准库介绍(一)

你见过哪些令你膛目结舌的代码技巧&#xff1f; 文章目录 你见过哪些令你膛目结舌的代码技巧&#xff1f;前言几种库bufio&#xff08;带缓冲的 I/O 操作&#xff09;特性示例 bytes (实现字节操作)特性示例 总结专栏集锦写在最后 前言 随着计算机科学的迅猛发展&#xff0c;编…

统计和绘图软件GraphPad Prism mac功能特点

GraphPad Prism mac是一款专业的统计和绘图软件&#xff0c;主要用于生物医学研究、实验设计和数据分析。 GraphPad Prism mac功能和特点 数据导入和整理&#xff1a;GraphPad Prism 可以导入各种数据格式&#xff0c;并提供直观的界面用于整理、编辑和管理数据。用户可以轻松…

使用 ElementUI 组件构建无边框 Window 桌面应用(WinForm/WPF)

生活不可能像你想象得那么好,但也不会像你想象得那么糟。 我觉得人的脆弱和坚强都超乎自己的想象。 有时,我可能脆弱得一句话就泪流满面;有时,也发现自己咬着牙走了很长的路。 ——莫泊桑 《一生》 一、技术栈 Vite + Vue3 + TS + ElementUI(plus) + .NET Framework 4.7.2…

如何使用Docker将.Net6项目部署到Linux服务器(二)

二 安装Redis 2.1 基本安装 2.1.1 下载Redis 进去Redis官网 http://www.redis.io/ 历史版本下载地址&#xff1a;Index of /releases/ Redis中文文档地址&#xff1a;Redis文档中心 -- Redis中国用户组&#xff08;CRUG&#xff09; Redis下载地址&#xff1a; Downloa…

【Linux进阶之路】线程

文章目录 一、初始线程1.概念2.执行3.调度4.切换 二、线程控制1.创建2.等待3.分离4.退出5.取消 三、线程安全1.互斥1.1初始1.2理解1.3锁1.3.1概念1.3.2原理1.3.4死锁 2.同步2.1概念2.2原理 3.生产消费者模型 总结尾序 一、初始线程 1.概念 简单的概念&#xff1a; 线程就是一…

七、Class文件结构及深入字节码指

一、JVM语言的无关性与class类文件 不同平台的虚拟机与所有平台都统一使用的程序存储格式——字节码&#xff08;ByteCode&#xff09;是构成平台无关性的基石&#xff0c;也是语言无关性的基础。 Java 虚拟机不和任何语言绑定&#xff0c;它只与“Class 文件”这种特定的二进…

微服务架构<2>

在电商项目中&#xff0c;我们针对一些核心业务&#xff0c;比较复杂的业务需要做一些设计以及优化的过程首先我们针对于订单的模块拆分了2个子模块1.order-curr实时下单业务 2.order-his 做一些历史的订单归档我们的订单业务 >商品添加至购物车 >购物车结算--> 订单…

【Docker容器精解篇 】深入探索Docker技术的概念与容器思想

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《docker容器精解篇》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 前言一、Docker 的介绍1.1 Docker 的由来1.1.1 环境不一致1.1.2 隔离性1.1.3 弹性伸缩1.1.4 学习成本 1.2 Doc…

ECMAScript 的未来:预测 JavaScript 创新的下一个浪潮

以下是简单概括关于JavaScript知识点以及一些目前比较流行的比如&#xff1a;es6 想要系统学习&#xff1a; 大家有关于JavaScript知识点不知道可以去 &#x1f389;博客主页&#xff1a;阿猫的故乡 &#x1f389;系列专栏&#xff1a;JavaScript专题栏 &#x1f389;ajax专栏&…

MT3608 高效率1.2MHz2A升压转换器和MT3608L 高效率1.2MHz 2.5A升压转换器 MT3608L和MT3608的区别

MT3608是一个恒定的频率&#xff0c;6引脚SOT23电流模式升压转换器的小&#xff0c;低功耗应用的目的。该MT3608开关在1.2MHz&#xff0c;并允许微小的&#xff0c;低成本的电容器和电感器使用2毫米或更小的高度内部软启动浪涌电流的结果&#xff0c;并延长电池寿命。 …

Hive执行计划

Hive提供了explain命令来展示一个查询的执行计划&#xff0c;这个执行计划对于我们了解底层原理&#xff0c;Hive 调优&#xff0c;排查数据倾斜等很有帮助。 使用语法如下&#xff1a; explain query;在 hive cli 中输入以下命令(hive 2.3.7)&#xff1a; explain select s…

springMVC-与spring整合

一、基本介绍 在项目开发中&#xff0c;spring管理的 Service和 Respository&#xff0c;SrpingMVC管理 Controller和ControllerAdvice,分工明确 当我们同时配置application.xml, springDispatcherServlet-servlet.xml , 那么注解的对象会被创建两次&#xff0c; 故…

U盘加密软件下载安装步骤

随着移动存储设备的普及&#xff0c;U盘已成为我们工作和生活中不可或缺的存储工具。然而&#xff0c;U盘丢失或被盗的风险也随之增加&#xff0c;如何保护U盘中的敏感数据成为了重要的问题。此时&#xff0c;U盘加密软件成为了解决这一问题的有效手段。 下面&#xff0c;我们…

SQLiteStudio安装指南

本博文源于笔者想要打开sqlite3的db文件&#xff0c;于是下载了SQLiteStudio&#xff0c;下载了它&#xff0c;sqlite3的文件随便查看&#xff0c;这里从零开始安装 文章目录 1、搜索官网网址2、开始下载3、开始安装4、开始使用5、总结 1、搜索官网网址 官网地址&#xff1a;…