HTML---JS移动端触屏事件touch详解
1:触屏事件概述
移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。
touch 对象代表一个触摸点。
触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
2:兼容DOM的触摸事件
2.1:常见的触屏事件如下:
touchstart | 当手指触摸屏幕时触发 |
touchmove | 当手指在屏幕上滑动时连续触发 |
touchend | 当手指在屏幕上移开时触发 |
touchcancel | 当系统停止跟踪触摸时触发(不常用) |
注 | 上述事件都会冒泡,也都可以取消。每个触摸事件的event对象都提供了在鼠标事件中常见的属性: bubbles,cancelable,view,clientyX,clientY,screenX,screenY等 |
2.2: 移动端拖动元素
- touchstart、touchmove、touchend 可以实现拖动元素
- 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY
- 移动端拖动的原理: 手指移动中,计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
- 手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置
拖动元素三步曲:
(1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置
(2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子
(3) 离开手指 touchend:
注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();
2.3:触摸事件对象(TouchEvent)
TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等
touchstart、touchmove、touchend 三个事件都会各自有事件对象。
触摸事件对象重点我们看三个常见对象列表:
触摸列表 | 说明 |
touches | 正在触摸屏幕的所有手指的一个列表 |
targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
changedTouches | 手指状态发生了改变的列表,从无到有,从有到无变化 |
每个touch对象包含的属性:
cientX |
触摸目标在视口中的X坐标 |
clientY | 触摸目标在视口中的Y坐标 |
pageX | 触摸目标在页面中的X坐标 |
pageY | 触摸目标在页面中的Y坐标 |
screenX | 触摸目标在屏幕中的X坐标 |
screenY | 触摸目标在屏幕中的Y坐标 |
identifier | 标识触摸的唯一ID 一个数字,用于唯一标识触摸会话中的当前手指 |
target | 触摸的DOM节点目标 |
HTML---JS移动端触屏事件touch详解相关推荐
- JS 移动端触屏滑动
首页> 程序开发 > web前端 > JavaScript > 正文 JS案例之5--移动端触屏滑动 2014-08-15 0个评论 收藏 我要投稿 移动端 ...
- Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- 触屏事件 touch
触屏包括的事件: touchstart当手指触摸屏幕时触发 touchmove当手指在屏幕上滑动时连续触发 touchend当手指从屏幕上移开时触发 touchcancel当系统停止跟踪触摸时触发 每 ...
- 手机端html5触屏事件(touch事件)
touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...
- 手机端html5触屏事件(touch事件)3
touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...
- js form表单onsubmit事件用法详解
onsubmit事件是当表单提交时进行相关js操作的一个事件.(但是有疑问) onsubmit 事件会在表单中的确认按钮被点击时发生.当该事件触发的函数中返回false时,表单就不会被提交. 请看下面 ...
- JavaScript18——触屏事件
1.1. 触屏事件 1.1.1 触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果, 但是移动端也有自己独特的地方.比如触屏事件 touc ...
- android 触摸 事件,Android触屏事件和MotionEvent详解
Android屏幕操作 屏幕是用户和Android设备交互的主要媒介,屏幕分为触屏和非触屏.Android设备目前有四种类型:Android Phone,Android Tablet,Android ...
- html 手机端拖拽效果,JS实现移动端触屏拖拽功能
1.html 2.css * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #div1 { width: 5 ...
最新文章
- windows 基础及基本软件测试环境搭建
- vs2013编译boost1.55.0 32/64位
- 成功解决OSError: cannot open resource self.font = core.getfont(font, size, index, encoding, layout_engin
- 牛客练习赛36 F-Rabbit的蛋糕 (叉积求面积, 记录前缀)
- “网页内容无法访问”可能是跨域错误!
- Spark精华问答 | Spark和Hadoop的架构区别解读
- android 获取monkey日志_安卓app测试之Monkey日志分析
- 【POJ16553107】树的重心——点分治的准备
- 理解响应式编程(RxJS)
- 2018/3/27 省选模拟赛 140分
- jdk StringBuilder实现
- win10 mysql 入站规则_WIn10防火墙入站规则设置无效
- Go语言——没有对象的面向对象编程
- Pandas之skew,求偏度
- vlc for android 不能全屏,或者画面不能铺满的问题。
- QT之QLineEdit——实现鼠标点击事件
- 吴恩达深度学习课程笔记(四):卷积神经网络2 实例探究
- 春季出游,学会这些功能,让你旅途更舒心
- FL Studio21最新中文公测版下载及新功能介绍
- 华为python自动化怎么领取_python+adb实现自动化获取手机信息
热门文章
- 2022年医院三基考试医师考试模拟试题卷及答案
- 用canvas画环形图
- 小little白white单片机教程01环境配置
- 招商头条:上海2020年将建成国际金融中心;重庆合川签约22个项目
- 张陈丞:第四范式智能风控中台架构设计及应用
- zookeeper 学习笔记 (C语言版本)
- JavaSE面向对象:继承、多态、Super、Object类、重写、static、final、静态成员、懒汉式、饿汉式、单例设计模式、初始化块、抽象类、抽象方法、接口
- uvalive 7480 Association for Control Over Minds
- 如何查看jar包的是用什么jdk版本编译的
- 基于JavaWeb的签到系统