JS移动端触屏事件

news2024/11/17 21:36:46

在我们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.coloradmin.cn/o/1200488.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【设计原则篇】聊聊单一职责原则

因为是刚开始写软件设计相关的文章&#xff0c;这里先大概介绍下&#xff0c;软件设计相关的知识图谱。大概分类的话&#xff0c; 编程范式 软件设计相关原则 Don’t Repeat Yourself (DRY)Keep It Simple, Stupid(KISS)Program to an interface, not an implementationYou Ai…

电脑版微信收到的图片怎么样自动保存到指定文件夹中?

8-5 在平时的工作中&#xff0c;如果你每天都需要接收并保存很多同事发来的图片&#xff0c;如何实现自动保存在微信上接收到的图片呢&#xff1f;本文的方法也许适合你&#xff0c;它可以自动把微信上收到的图片、视频、文件帮你保存到指定地方&#xff0c;可以大大地提高工作…

2023年【起重机械指挥】考试试卷及起重机械指挥操作证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年起重机械指挥考试试卷为正在备考起重机械指挥操作证的学员准备的理论考试专题&#xff0c;每个月更新的起重机械指挥操作证考试祝您顺利通过起重机械指挥考试。 1、【多选题】《中华人民共和国特种设备安全法》…

【狂神说Java】Nginx详解

✅作者简介&#xff1a;CSDN内容合伙人、信息安全专业在校大学生&#x1f3c6; &#x1f525;系列专栏 &#xff1a;狂神说Java &#x1f4c3;新人博主 &#xff1a;欢迎点赞收藏关注&#xff0c;会回访&#xff01; &#x1f4ac;舞台再大&#xff0c;你不上台&#xff0c;永远…

postman上传照片,视频,音频等上传文件操作测试方法

Postman上传照片&#xff0c;视频&#xff0c;音频等上传文件操作测试方法 新建一个request&#xff0c;更改请求方式&#xff0c;点击Body 勾选form-data ,key后面下拉框选择File 上一步勾选后Value即出现选择本地文件按钮&#xff0c;填写Key&#xff0c;选择文件即可 此时…

【 第十三章】软件设计师 之 面向对象程序设计

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 备考资料导航 软考好处&#xff1a;软考的…

Hutool Excel导出 配置宽度自适应 工具类

简介&#xff1a;Hutool是一款十分好用的开发工具集&#xff0c;里面包含了大部分日常开发常用的工具&#xff0c;使用简单方便&#xff0c;可以大大提升日常开发效率&#xff0c;十分推荐大家使用。这里简单总结一下基于Hutool的Excel使用。 一、Hutool依赖 <!-- Excel导出…

从0开始python学习-34.pytest常用插件

目录 1. pytest-html&#xff1a;生成HTML测试报告 2.pytest-xdist&#xff1a;并发执行用例 3. pytest-order&#xff1a;自定义用例的执行顺序 4. pytest-rerunfailures&#xff1a;用例失败时自动重试 5. pytest-result-log:用例执行结果记录到日志文件 1. pytest-html…

Linux MMC子系统 - 4.eMMC 5.1常用命令说明(2)

By: Ailson Jack Date: 2023.11.12 个人博客&#xff1a;http://www.only2fire.com/ 本文在我博客的地址是&#xff1a;http://www.only2fire.com/archives/163.html&#xff0c;排版更好&#xff0c;便于学习&#xff0c;也可以去我博客逛逛&#xff0c;兴许有你想要的内容呢。…

CnosDB 狂欢!全面支持 Helm 部署,轻松搞定你的分布式时序数据库!

大家好&#xff01;今天有个热辣新闻要和大家分享——CnosDB 狂欢时刻来啦&#xff0c;全面支持 Helm 部署&#xff01;如果你是物联网、工业互联网、车联网或者IT运维的粉丝&#xff0c;那你绝对不能错过这个重磅消息&#xff01; CnosDB Helm Chart 究竟是啥&#xff1f; 别…

C# Socket通信从入门到精通(8)——单个异步TCP服务器监听多个客户端C#代码实现

前言: 我们在C# Socket通信从入门到精通(7)——单个异步TCP服务器监听单个客户端C#代码实现这篇文章中讲述了一个服务器如何与一个客户端进行交互,但是有时候我们需要一个服务器与多个客户端进行交互,这时候上一篇文章介绍的方法就不足以实现这个功能,本篇文章就是介绍如…

通过easyexcel导出数据到excel表格

这篇文章简单介绍一下怎么通过easyexcel做数据的导出&#xff0c;使用之前easyui构建的歌曲列表crud应用&#xff0c;添加一个导出按钮&#xff0c;点击的时候直接连接后端接口地址&#xff0c;在后端的接口完成数据的导出功能。 前端页面完整代码 let editingId; let request…

保姆级jupyter lab配置清单

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

由浅入深学习统计学 - 常用统计图形学习

学习笔记 第一章- 信息图形化 图形化&#xff08;可视化&#xff09; 在一堆数据中&#xff0c;自己发现了这些数据的规律&#xff0c;但是无法表述给其他人知道&#xff0c;图形化就是便于他人理解数据的规律的展示的手段。 或者说我们也可以从统计的数据图形中发现某些没有…

计算机毕业设计选题推荐-个人记账理财微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

NLP实战命名实体识别

文章目录 一、导入相关包二、加载数据集三、数据预处理四、创建模型五、创建评估函数六、配置训练参数七、创建训练器八、模型训练九、模型预测 一、导入相关包 DataCollatorForTokenClassification 用于 Token 级别的分类任务 import evaluate from datasets import load_da…

【Redis系列】Redis上设置key,value的时候出现NOAUTH Authentication required提示如何解决?

哈喽&#xff0c;大家好&#xff0c;我是小浪。相信大家在初学一门新的知识点的时候都会遇到各种各样的问题&#xff0c;在网上找了一大堆的解决方案&#xff0c;最后还是无功而返&#xff0c;那么今天博主就记录一下在进行Redis的一些操作中遇到的问题~ 当我们好不容易安装好R…

基于SSM的KTV包厢管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

Windows server 2008 R2 IIS搭建ASP网站教程

一、安装应用程序服务器 提示安装成功 二、添加角色服务asp 三、asp网站配置 放入源码 设置网站首页为index.asp: 设置应用程序池 四、设置网站目录属性 五、access数据库连接配置 Cd c:\Windows\System32\inetsrv appcmd list apppool /xml | appcmd set apppool /…

HarmonyOS应用开发者高级认证(88分答案)

看好选择题&#xff0c;每个2分多答对2个刚好88分&#xff0c;祝你顺利。 其它帮扶选择题。 一、判断 只要使用端云一体化的云端资源就需要支付费用&#xff08;错&#xff09;所有使用Component修饰的自定义组件都支持onPageShow&#xff0c;onBackPress和onPageHide生命周期…