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

请添加图片描述

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

加班把数据库重构完毕

加班把数据库重构完毕 本文的数据库重构是基于 clickhouse 时序非关系型的数据库。该数据库适合存储股票数据&#xff0c;速度快&#xff0c;一般查询都是 ms 级别&#xff0c;不需要异步查询更新界面 ui。 达到目标效果&#xff1a;数据表随便删除&#xff0c;重新拉数据以及指…

Matter学习笔记(2)——数据模型和设备类型

一、设备数据模型 Matter 中的设备具有明确定义的 数据模型(DM)&#xff0c;它是设备功能的分层建模。使用 属性(Attribute)、命令(Command) 和 事件(Event) 的概念描述 Matter 节点支持的远程操作&#xff0c;并分组为称为集群的逻辑块。Matter 应用集群规范中包含的集群具有…

POJ 3254 Corn Fields 状态压缩DP(铺砖问题)

一、题目大意 我们要在N * M的田地里种植玉米&#xff0c;有如下限制条件&#xff1a; 1、对已经种植了玉米的位置&#xff0c;它的四个相邻位置都无法继续种植玉米。 2、题目中有说一些块无论如何&#xff0c;都无法种植玉米。 求所有种植玉米的方案数&#xff08;不种植也…

【Java 进阶篇】JQuery DOM操作:轻松驾驭网页内容的魔法

在前端开发的舞台上&#xff0c;DOM&#xff08;文档对象模型&#xff09;是我们与网页内容互动的关键。而JQuery作为一个轻量级的JavaScript库&#xff0c;为我们提供了便捷而强大的DOM操作工具。在本篇博客中&#xff0c;我们将深入探讨JQuery的DOM内容操作&#xff0c;揭开这…

外星人笔记本键盘USB协议逆向

前言 我朋友一台 dell g16 购买时直接安装了linux系统&#xff0c;但是linux上没有官方的键盘控制中心&#xff0c;所以无法控制键盘灯光&#xff0c;于是我就想着能不能逆向一下键盘的协议&#xff0c;然后自己写一个控制键盘灯光的程序。我自己的外星人笔记本是m16&#xff…

阿里系APP崩了?回应来了!

最近&#xff0c;阿里云遭遇了一场可怕的疑似故障&#xff0c;引起了广泛的关注和热议。各种消息纷传&#xff0c;阿里云盘崩了&#xff0c;淘宝又崩了&#xff0c;闲鱼也崩了&#xff0c;连钉钉也不幸中招。这一系列故障让人不禁发问&#xff1a;阿里系的APP都崩了&#xff0c…

【Unity每日一记】“调皮的协程”,协程和多线程的区别在哪里

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

msvcp120.dll丢失的6种解决方法,教你如何修复dll文件丢失

“找不到msvcp120dll,无法继续执行代码的6个修复方案”。我相信很多朋友在运行某些程序时&#xff0c;可能会遇到这样的错误提示&#xff1a;“找不到msvcp120dll&#xff0c;无法继续执行代码”。那么&#xff0c;msvcp120dll究竟是什么&#xff1f;为什么会丢失呢&#xff1f…

发布订阅者模式(观察者模式)

目录 应用场景 1.结构 2.效果 3.代码 3.1.Main方法的类【ObserverPatternExample】 3.2.主题&#xff08;接口&#xff09;【Subject】 3.3.观察者&#xff08;接口&#xff09;【Observer】 3.4.主题&#xff08;实现类&#xff09;【ConcreteSubject】 3.5.观察者&a…

qemu 之 uboot、linux 启动

目录 编译uboot、kernel 编译启动从 uboot 中引导启动 linux注参考 本文主要说明 arm64 在 qemu 上的相关启动。 编译 使用的是 qemu-8.1.1 版本&#xff0c;编译命令如下: ../configure --cc/usr/local/bin/gcc --prefix/home/XXX/qemu_out --enable-virtfs --enable-slir…

Three.js——基于原生WebGL封装运行的三维引擎

文章目录 前言一、什么是WebGL&#xff1f;二、Three.js 特性 前言 Three.js中文官网 Three.js是基于原生WebGL封装运行的三维引擎&#xff0c;在所有WebGL引擎中&#xff0c;Three.js是国内文资料最多、使用最广泛的三维引擎。既然Threejs是一款WebGL三维引擎&#xff0c;那么…

RAG相关内容介绍

本文记录在查找RAG相关内容时所整合的一些资料与内容&#xff0c;还有一个组会报告的PPT 文章目录 定义LLM的知识更新难题 RAG是什么&#xff1f;-“开卷考试”RAG原理与技术RAG技术细节一、数据索引• 数据提取• 分块&#xff08;Chunking&#xff09;分块方式确定应用程序的…

摊牌 了,我不藏了,上线了一年多的网站还是广而告之吧!

大家好&#xff0c;我是大明哥&#xff0c;一个专注「死磕 Java」系列文章创作的程序员。 本文已收录到我的小站&#xff1a;https://skjava.com。 从去年开始一直有小伙伴问我&#xff0c;大明哥&#xff0c;你的网站怎么打不开了&#xff1f;我只能苦涩地跟他说&#xff0c;没…

DevChat智能编程助手:小白也能轻松上手的开发利器

DevChat智能编程助手&#xff1a;小白也能轻松上手的开发利器 一、DevChat介绍1.1 DevChat简介1.2 DevChat特点1.3 DevChat官网 二、注册DevChat账号2.1 访问DevChat官网2.2 注册账号2.3 复制Access Key2.4 登录DevChat 三、安装DevChat3.1 打开VS Code软件3.2 安装DevChat3.3 …

(免费领源码)java#ssm#mysql在线学习平台85204-计算机毕业设计项目选题推荐

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;在线学习平台当然也不能排除在外。在线学习平台是以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#x…

Linux下C++调用python脚本实现LDAP协议通过TNLM认证连接到AD服务器

1.前言 首先要实现这个功能&#xff0c;必须先搞懂如何通过C调用python脚本文件最为关键&#xff0c;因为两者的环境不同。本质上是在 c 中启动了一个 python 解释器&#xff0c;由解释器对 python 相关的代码进行执行&#xff0c;执行完毕后释放资源。 2 模块功能 2.1python…

基于樽海鞘群算法优化概率神经网络PNN的分类预测 - 附代码

基于樽海鞘群算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于樽海鞘群算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于樽海鞘群优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…

CnosDB 在最近新发布的 2.4.0 版本中增加对时空函数的支持。

CnosDB 在最近新发布的 2.4.0 版本中增加对时空函数的支持。 概述 时空函数是一种用于描述时空结构和演化的函数。它在物理学、数学和计算机科学等领域中都有广泛的应用。时空函数可以描述物体在时空中的位置、速度、加速度以及其他相关属性。 用法 CnosDB 将使用一种全新的…

基于蜉蝣算法优化概率神经网络PNN的分类预测 - 附代码

基于蜉蝣算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于蜉蝣算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于蜉蝣优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络的光滑…

腾讯域名优惠卷领取

腾讯域名到到期了&#xff0c;听说申请此计划&#xff0c;可获得优惠卷&#xff0c;看到网上5年域名只需要10元&#xff0c;姑且试试看。 我的博客即将同步至腾讯云开发者社区&#xff0c;邀请大家一同入驻&#xff1a;https://cloud.tencent.com/developer/support-plan?in…