touch事件总结,监听屏幕点击事件
Touch对象--MDN
TouchEvent--MDN
一、问题背景
click事件在移动端的300毫秒延迟问题
当需要监听诸如左滑、右滑之类的事件
二、知识点概括
1. 事件类型
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发
2. TouchEvent事件(均只读)
targetTouches
一个 TouchList 对象,是包含了如下触点的 Touch 对象:触摸起始于当前事件的目标 element 上,并且仍然没有离开触摸平面的触点。touches
一个 TouchList 对象,包含了所有当前接触触摸平面的触点的 Touch 对象,无论它们的起始于哪个 element 上,也无论它们状态是否发生了变化。changedTouches
一个 TouchList 对象,包含了代表所有从上一次触摸事件到此次事件过程中,状态发生了改变的触点的 Touch 对象。ctrlKey
只读布尔值,指明触摸事件触发时,键盘 ctrl 键是否被按下。metaKey
只读布尔值,指明触摸事件触发时,键盘 meta 键 (Wikipedia - meta Key)是否被按下。shiftKey
只读布尔值,指明触摸事件触发时,键盘 shift 键是否被按下。altKey
只读布尔,指明触摸事件触发时,键盘 alt 键是否被按下。
3. Touch对象(均只读)
identifier
此 Touch 对象的唯一标识符. 一次触摸动作(我们值的是手指的触摸)在平面上移动的整个过程中, 该标识符不变. 可以根据它来判断跟踪的是否是同一次触摸过程.screenX
触点相对于屏幕左边沿的的X坐标.screenY
触点相对于屏幕上边沿的的Y坐标.clientX
触点相对于可见视区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移.clientY
触点相对于可见视区(visual viewport)上边沿的的Y坐标. 不包括任何滚动偏移.pageX
触点相对于HTML文档左边沿的的X坐标. 当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移.pageY
触点相对于HTML文档上边沿的的Y坐标. 当存在水平滚动的偏移时, 这个值包含了垂直滚动的偏移.radiusX
能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径. 这个值的单位和screenX 相同.radiusY
能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和screenY 相同.rotationAngle
它是这样一个角度值:由radiusX 和 radiusY 描述的正方向的椭圆,需要通过顺时针旋转这个角度值,才能最精确地覆盖住用户和触摸平面的接触面.force
手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数.target
当这个触点最开始被跟踪时(在 touchstart 事件中), 触点位于的HTML元素. 哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 window 或 document 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件.
三、 测试情况
//事件说明:s:touchstart , e:touchend , m:touchmove, c:click
//结果说明:1:true 0:false
1. TouchEvent.changedTouches[0].pageX
ios : s1 e1 m1 c0
android :s1 e1 m1 c02. TouchEvent.touches[0].pageX
ios: s1 e0 m1 c0
android :s1 e0 m1 c03. TouchEvent.targetTouches[0].pageX
ios:s1 e0 m1 c0
android :s1 e0 m1 c0
四、总结
手机上的点击事件,建议使用touchend 代替click解决点击延迟问题
如果需要监听屏幕滑动方向、距离等,建议使用touchstart & touchend的 TouchEvent.changedTouches来获取点击位置
touch事件总结,监听屏幕点击事件相关推荐
- Framework 全局监听屏幕点击事件 INPUT_EVENT_INJECTION
需求:用户点击屏幕后取消原有定时任务,无操作后顺延原来定时任务 简单分析 要想全局监听,那必须是在 framework 中了,应该从哪里切入呢?先看看 log,每点击一次屏幕后发现打印 InputDi ...
- android 触摸监听重写_Android监听屏幕的滑动事件
实现监听屏幕上下左右滑动事件 前段时间为了实现这个功能在网上找了很多教程,发现很多教程都是很大的篇幅,对于像我这种一点都不了解的人GestureListener的人来说可能很难理解,动不动就是几百行代 ...
- Android监听屏幕的滑动事件
实现监听屏幕上下左右滑动事件 前段时间为了实现这个功能在网上找了很多教程,发现很多教程都是很大的篇幅,对于像我这种一点都不了解的人GestureListener的人来说可能很难理解,动不动就是几百行代 ...
- jquery 监听td点击事件_React 事件 | 1. React 中的事件委托
说到 React 的事件,也算是 React 的一个非常有亮点的优化,它在原生事件体系的基础上,单独实现了一套事件机制.想要了解这个机制,首先的了解下什么是事件委托以及事件委托的好处. 事件委托 假设 ...
- jquery 监听td点击事件_安卓开发监听点击事件的一种方法
本人是菜鸟一只,学习安卓纯属兴趣.没有真正上过编程课程,所有知识都是在网上获取的.今天分享的是监听点击事件的一个方法,这个方法的好处是代码较简洁. 如图,点击保存时,把上面的数据入库. 实现如下: 在 ...
- jquery 监听td点击事件_VUE @hook浅析(监听子组件的生命周期钩子) - 古兰精
一.前言 接触hook是从webhook开始接触的,webhook是git的一个扩展服务,可以在仓库接收到push/commit事件并发送http request至一个开发者可以自定义的URL.通过这 ...
- untiy 监听屏幕点击 物体(实现)
第一种方式: 1.百度的第三方法 using System.Collections; using System.Collections.Generic; using UnityEngine; usin ...
- python获取键盘事件_50-用Python监听鼠标和键盘事件
PyHook是一个基于Python的"钩子"库,主要用于监听当前电脑上鼠标和键盘的事件.这个库依赖于另一个Python库PyWin32,如同名字所显示的,PyWin32只能运行在W ...
- html的 button点击事件无效,InfoWindow里面加button,监听button点击事件无效 求解啊...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 点击infoWindw中的button按钮,无效果: 覆盖默认的dom结构 html, body, #container { width: 100%; h ...
最新文章
- 如何通过抓包实战来学习Web协议?
- 娓娓道来Promise
- 推荐系统(工程方向)-策略平台
- [Leetcode][第77题][JAVA][组合][回溯]
- 移植U-Boot思路和实践 | 基于RK3399
- Multi-thread--C++11中atomic的使用
- asp.net使用include包含文件中文乱码_C++: 编写自己的头文件
- 机器视觉入门知识总结
- OCiOS开发:汉字转拼音
- 2-AltiumDesigner原理图设计
- 12C新特性--Application Continuity
- 用python画一个机器猫歌词_手把手 | 用Python语言模型和LSTM做一个Drake饶舌歌词生成器-阿里云开发者社区...
- php sapi zend,108 内核探索 --php扩展、zend引擎、sapi
- 2021年计算机试题,2021年计算机试题及答案-20210515145837.doc-原创力文档
- 606. 根据二叉树创建字符串(视频讲解!!!)
- 分解中港扬盛三相变频电源备件更换的方法
- 这篇文章告诉你艺术签名自动生成器有哪些
- 企业邮箱还安全吗?搜狐员工全员损失惨重
- 算法时间复杂度的渐近表示法
- 【el-elementUI】---删除弹出窗口确认操作