touch详解

简介: touch事件 前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲。例如我们常用的click事件,在触屏设备下是如此无力。 手机上的大部分交互都是通过touch来实现的,于是,对于触屏的交互式网站,触摸事件是相当重要的。

touch事件

前言

一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲。例如我们常用的click事件,在触屏设备下是如此无力。

手机上的大部分交互都是通过touch来实现的,于是,对于触屏的交互式网站,触摸事件是相当重要的。

Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范

规范

这里我们介绍几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦):

touchstart:触摸开始的时候触发

touchmove:手指在屏幕上滑动的时候触发

touchend:触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

touches:当前位于屏幕上的所有手指的列表。

targetTouches:位于当前DOM元素上手指的列表。

changedTouches:涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息(常用):

identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)

target:DOM元素,是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。 

radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈

目录
相关文章
|
开发工具 git Python
彻底解决 git push 的【pack exceeds maximum allowed size】
彻底解决 git push 的【pack exceeds maximum allowed size】
1596 0
|
运维 网络虚拟化 5G
带你读《ONAP技术详解与应用实践》之一:网络自动化挑战及ONAP介绍
国内首部系统剖析ONAP的书籍,也是理论性与实战性兼具的网络自动化实践指导书!本书详细全面地介绍了网络自动化的挑战和发展趋势,以及ONAP的概况、架构设计理念、设计原则、各模块实现细节、关键特性、应用场景和案例实践等。通过本书读者可以深入理解ONAP,提升对网络自动化及相关领域的认知。作者及其团队成员均是华为网络开源领域的专家,长期参与社区的治理、贡献和回馈,致力于通过产业协作,打造统一的平台,降低集成成本,加快新技术导入,助力新一代网络运维系统升级。同时,本书也融入了作者及其团队在网络开源领域的深刻洞察和见解,书中分享了华为参与网络开源的实践经验,是电信网络转型的重要参考。
|
3月前
|
Java 调度 开发者
线程池
线程池是一种管理多个线程的技术,通过复用线程减少创建和销毁的开销,提高多线程编程效率。它帮助开发者简化线程管理,避免资源浪费和过度线程切换。Java中通过Executor框架实现线程池,核心类包括ExecutorService、ThreadPoolExecutor等,支持任务提交、调度及关闭操作。本文介绍其使用方法与内部架构。
121 3
|
9月前
|
域名解析 安全 数据建模
没有域名只有IP地址怎么申请https证书?
IP 地址 SSL 证书是一种特殊的 SSL/TLS 证书,允许直接为 IP 地址配置 HTTPS 加密,适用于内部服务、私有网络和无域名的设备管理。与基于域名的证书不同,申请过程较为复杂,需选择支持 IP 的证书颁发机构(CA),并完成额外的身份验证步骤。浏览器对 IP 地址的支持有限,可能会显示警告。通过正确配置服务器(如 Nginx 或 Apache),可以确保通信安全。
1076 12
|
C语言
【c语言】循环语句
循环结构是C语言中用于简化重复操作的重要工具,主要包括while循环、do-while循环和for循环。while循环是最基本的形式,通过不断检查条件来决定是否继续执行循环体。do-while循环则先执行循环体,再检查条件,至少执行一次。for循环逻辑更复杂,但使用频率最高,适合初始化、条件判断和更新变量的集中管理。此外,循环中还可以使用break和continue语句来控制循环的提前终止或跳过当前迭代。最后,循环可以嵌套使用,解决更复杂的问题,如查找特定范围内的素数。
193 6
|
Java Android开发
IDEA设置项目编码格式【修改为GBK 或 UTF-8】
这篇文章介绍了在IntelliJ IDEA中如何设置项目编码格式,包括将项目编码修改为GBK或UTF-8的详细步骤和图解。
19867 12
IDEA设置项目编码格式【修改为GBK 或 UTF-8】
|
敏捷开发 监控
敏捷开发的全过程问题之快速建立迭代机制并进行规模化的推广和度量的问题如何解决
敏捷开发的全过程问题之快速建立迭代机制并进行规模化的推广和度量的问题如何解决
161 2
|
Docker 容器
6-16|docker怎么把容器内的文件传出来
6-16|docker怎么把容器内的文件传出来
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校科研信息管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校科研信息管理系统附带文章源码部署视频讲解等
108 0
|
云安全 存储 运维
首次全面解析云原生成熟度模型:解决企业「诊断难、规划难、选型难」问题
从“上云”到“云上”原生,云原生提供了最优用云路径,云原生的技术价值已被广泛认可。当前行业用户全面转型云原生已是大势所趋,用户侧云原生平台建设和应用云原生化改造进程正在加速。
2713 109
首次全面解析云原生成熟度模型:解决企业「诊断难、规划难、选型难」问题