当前位置： 首页 > news >正文

JS移动端触屏事件

news 2026/2/11 1:29:13

在我们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("触摸结束")}

请添加图片描述

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

相关文章：

JS移动端触屏事件

在我们PC端中有许多的事件&#xff0c;那我们在移动端有没有事件呢&#xff1f;让我为大家介绍一下移动端常用的事件&#xff0c;触屏事件 触屏事件 touch (也称触摸事件)&#xff0c;Android 和IOS 都有 touch 对象代表一个触摸点。触摸点可能是一根手指&#xff0c;也可能是一…...

编程日记 2023/11/13 4:06:30

C语言——打印1000年到2000年之间的闰年

闰年&#xff1a; 1、能被4整除不能被100整除 2、能被400整除 #define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h> int main() {int year;for(year 1000; year < 2000; year){if((year%4 0) && (year%100!0) || (year%400 0)){printf("%d ",ye…...

编程日记 2023/11/13 4:05:28

【Linux】【驱动】设备树下的paltform总线

【Linux】【驱动】设备树下的paltform总线 1. 驱动程序的完整代码2. 使用到的相关函数3 使用到的指令3.2 设备上使用的指令 1. 驱动程序的完整代码 主要是展示了通过总线上挂载的方式来实现相关的数据读取 实质上就是几个of函数的调用。 /** Author: topeet* Description: 设…...

编程日记 2023/11/13 4:04:26

洛谷 NOIP 2023 模拟赛-汪了个汪-题解

简要题意 棋盘上有 n n n 行&#xff0c;第 i i i 行有 i i i 个格子。你要在格子填 1 ∼ n 1\sim n 1∼n&#xff0c;满足&#xff1a; 每行第一个数互不相同所有在行上相邻的两个数所组成的无序对互不相同每行的数互不相同 n ≤ 4000 n\le4000 n≤4000 题解 容易发现…...

编程日记 2023/11/13 4:03:25

洛谷 NOIP 2023 模拟赛 P9836 种树

洛谷 NOIP 2023 模拟赛 P9836 种树 文章目录 洛谷 NOIP 2023 模拟赛 P9836 种树题目大意思路code 题目大意 路边有 n n n 棵树&#xff0c;每棵树的 高度 均为正整数&#xff0c;记作 p 1 , p 2 … p n p_1, p_2 \dots p_n p1​,p2​…pn​。 定义一棵树的 宽度 为它高度的…...

编程日记 2023/11/13 4:02:24

链表经典OJ题（链表回文结构，链表带环，链表的深拷贝）

目录 前言 1.反转一个单链表。 2. 给定一个带有头结点 head 的非空单链表&#xff0c;返回链表的中间结点。 3.链表的回文结构。 4.链表带环问题&#xff08;*****&#xff09; 4.1是否带环 4.2 入环的节点 5.随机链表的复制&#xff08;链表的深拷贝&#xff09; 前言…...

编程日记 2023/11/13 4:01:22

AD教程 （十三）常见CHIP封装的创建

AD教程 &#xff08;十三&#xff09;常见CHIP&#xff08;贴片&#xff09;封装的创建 PCB封装是电子设计图纸和实物之间的映射体&#xff0c;具有精准数据的要求&#xff0c;在实际设计中需要通过规格书获取创建封装的数据参数。 PCB封装和实物的大小一致。PCB封装是承载实物…...

编程日记 2023/11/13 4:00:20

从0到1实现一个前端监控系统（附源码）

目录 一、从0开始 二、上报数据方法 三、上报时机 四、性能数据收集上报 收集上报FP 收集上报FCP 收集上报LCP 收集上报DOMContentLoaded 收集上报onload数据 收集上报资源加载时间 收集上报接口请求时间 五、错误数据收集上报 收集上报资源加载错误 收集上报js错…...

编程日记 2023/11/13 3:59:19

第7章-使用统计方法进行变量有效性测试-7.2-方差分析

目录 7.2 方差分析 7.2.1 单因素方差分析 组内变异 组间变异 总变异 随机误差...

编程日记 2023/11/13 3:58:17

【MongoDB】索引 – 文本索引（用权重控制搜索结果）

一、准备工作 这里准备一些数据 db.books.drop();db.books.insert({_id: 1, name: "Java", alias: "java 入门", description: "入门图书" }); db.books.insert({_id: 2, name: "C", alias: "c", description: "C 入…...

编程日记 2023/11/13 3:57:16

Git 入门使用

一、Git 入门 1.1 Git简介 Git是一个开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或小或大的项目。Git是由Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。 Git是目前世界上最先进的分布式版本控制系统&#xff0c;没有之一&a…...

编程日记 2023/11/13 3:56:14

如何写好接口自动化测试脚本

谈到接口测试&#xff0c;大家关注更多的是哪个工具更优秀&#xff0c;更好用。但是很少人关注到接口测试用例的设计问题&#xff0c;也很少人会去写接口用例&#xff0c;都代码化了嘛&#xff0c;还写什么用例&#xff0c;是吧&#xff1f; 这样真的对么&#xff1f;我们是不…...

编程日记 2023/11/13 3:55:14

openEuler编译安装nmon性能监控工具及可视化分析工具

ln 介绍 nmon&#xff08;short for Nigel’s Monitor&#xff09;是一个性能分析工具&#xff0c;由蓝色巨人IBM开发&#xff0c;最早用于自家操作系统UNIX&#xff0c;AIX &#xff08;Advanced Interactive eXecutive&#xff09;。现在也能用在Linux上。它可以显示系统的…...

编程日记 2023/11/13 3:54:12

96 前缀树Trie

前缀树 题解1 STL题解2 参考官方 Trie&#xff08;发音类似 “try”&#xff09;或者说 前缀树 是一种树形数据结构&#xff0c;用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景&#xff0c;例如自动补完和拼写检查。 请你实现 Trie 类&#xff1a; …...

编程日记 2023/11/13 3:51:10

“第六十六天”

这个我记得是有更优解的&#xff0c;不过还是明天发吧&#xff0c;明天想一想&#xff0c;看看能不能想起来 #include<string.h> int main() {char a[201] { 0 };char b[201] { 0 };scanf("%s %s", a, b);int na strlen(a);int nb strlen(b);int i 0, j …...

编程日记 2023/11/13 3:50:09

MYSQL5.7和MYSQL8配置主从

1、创建专门主从的账号 #登录 mysql -u root -p #创建用户 我这里用户名为test5&#xff0c;注意这里的ip是从库服务器的ip CREATE USER test5192.168.1.20 IDENTIFIED WITH mysql_native_password BY xxxxx; #给主从复制账号授权 grant replication slave on *.* to test5192…...

编程日记 2023/11/13 3:48:05

springboot苍穹外卖实战：九、小程序微信登录代码开发+商品浏览

微信登录 application.yml和application-dev.yml application-dev.yml sky:wechat:appid: xxxsecret: xxxapplication.yml sky:wechat:appid: ${sky.wechat.appid}secret: ${sky.wechat.secret}配置为微信用户生成jwt令牌时使用的配置项&#xff1a; application.yml sky…...

编程日记 2023/11/13 3:46:03

【MySQL系列】 第二章 · SQL（下）

写在前面 Hello大家好&#xff0c; 我是【麟-小白】&#xff0c;一位软件工程专业的学生&#xff0c;喜好计算机知识。希望大家能够一起学习进步呀&#xff01;本人是一名在读大学生&#xff0c;专业水平有限&#xff0c;如发现错误或不足之处&#xff0c;请多多指正&#xff0…...

编程日记 2023/11/13 3:45:02

SpringBoot_01

Spring https://spring.io/ SpringBoot可以帮助我们非常快速的构建应用程序、简化开发、提高效率。 SpringBootWeb入门 需求&#xff1a;使用SpringBoot开发一个web应用&#xff0c;浏览器发起请求/hello后&#xff0c;给浏览器返回字符串"Hello World~~~"。 步骤…...

编程日记 2023/11/13 3:43:00

【OS】AUTOSAR架构下多核通信

目录 前言 正文 1.多核通信介绍 2.多核间标准通信 2.1 什么是IOC 2.2 IOC的适用范围...

编程日记 2023/11/13 3:41:58

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2026/1/29 2:11:35

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2026/1/23 10:24:30

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2026/2/9 1:38:05

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2026/2/4 23:47:47

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2026/2/4 12:52:32