【JS教程】移动端 Touch（触摸）事件
一、pc端事件在移动端的问题
移动设备主要特点是不配备鼠标，键盘也只是在需要输入的地方才会激活虚拟键盘。所以以前的pc端事件在移动端使用起来就没有那么好用，虽然部分仍然可以使用。
1. click事件的300ms延迟问题。
2007年第一代iphone发布，由于那个年代所有的网页都是针对大屏的pc端设计的，iphone的Safari浏览器为了让用户浏览网页的时候可以浏览到整个网页，把viewport设置为960px(参考前面的文章)，好是好，但是由于缩放了整个页面，导致内容变得非常小，视力6.0的都不一定看得清楚。
所以Safari浏览器自带了一个当时看起来相当酷的一个功能：双击缩放。你双击页面的时候，浏览器会智能的缩放当前页面到原始大小。
双击缩放的原理就是，当你click一次之后，会经过300ms之后检测是否再有一次click，如果有的话，就会缩放页面。否则的话就是一个click事件。
所以，当你想执行click操作的时候，就感觉到了”卡顿”。如果点击之后100ms之后没有反应，基本就有卡顿的感觉。
2. dblclick事件失效
由于双击缩放的存在，pc端的dblclick事件在移动端也失效了。
二、移动端web新增 Touch（触摸）事件
随着触屏设备的普及，w3c为移动端web新增了touch事件。
最基本的touch事件包括4个事件：
1. touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
2. touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
3. touchend事件：当手指从屏幕上离开的时候触发。
4. touchcancel事件：当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。
三：触摸事件还包含下面三个用于跟踪触摸的属性。
- touches：表示当前跟踪的触摸操作的touch对象的数组。
- targetTouches：特定于事件目标的Touch对象的数组。（正在触摸当前 DOM 元素上的手指的一个列表。）
- changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组
四：每个Touch对象包含的属性：
1.Touch.identifier：
此 Touch 对象的唯一标识符。 一次触摸动作(我们指的是手指的触摸)在平 面上移动的整个过程中，该标识符不变。 可以根据它来判断跟踪的是否是同一次触摸过程，此值为只读属性。
2.Touch.screenX：
触点相对于屏幕左边沿的X坐标。只读属性。
3.Touch.screenY：
触点相对于屏幕上边沿的Y坐标。只读属性
4.Touch.clientX：
触点相对于可见视区(visual viewport)左边沿的X坐标。不包括任何滚动偏移。只读属性。
5.Touch.clientY：
触点相对于可见视区(visual viewport)上边沿的Y坐标。不包括任何滚动偏移。只读属性。
6.Touch.pageX：
触点相对于HTML文档左边沿的X坐标。当存在水平滚动的偏移时，这个值包含了水平滚动的偏移。只读属性。
7.Touch.pageY：
触点相对于HTML文档上边沿的Y坐标。当存在水平滚动的偏移时，这个值包含了垂直滚动的偏移。只读属性。
8.Touch.radiusX：
能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径。这个值的单位和 screenX 相同。只读属性。
9.Touch.radiusY：
能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径。这个值的单位和 screenY 相同。只读属性。
10.Touch.rotationAngle：
它是这样一个角度值：由radiusX 和 radiusY描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面。只读属性。
11.Touch.force：
手指挤压触摸平面的压力大小，从0.0(没有压力)到1.0(最大压力)的浮点数。只读属性。
12.Touch.target：
当这个触点最开始被跟踪时(在 touchstart 事件中)，触点位于的HTML元素。哪怕在触点移动过程中，触点的位置已经离开了这个元素的有效交互区域，或者这个元素已经被从文档中移除。需要注意的是，如果这个元素在触摸过程中被移除，这个事件仍然会指向它，但是不会再冒泡这个事件到 window 或 document 对象。因此，如果有元素在触摸过程中可能被移除，最佳实践是将触摸事件的监听器绑定到这个元素本身，防止元素被移除后，无法再从它的上一级元素上侦测到从该元素冒泡的事件。只读属性。
五：示例
下面的案例结合了 touchstart，touchmove，touchend 三个Touch事件实现拖拽改变进度条的进度。
详细代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>进度条</title><style>.d-flex {display: -ms-flexbox !important;display: flex !important;}.align-items-center {-ms-flex-align: center !important;align-items: center !important;}/* 清除浮动 */.clearfix::after {display: block;clear: both;content: "";}#progress-bar-module {padding: 10%;color: #fff;text-align:center;}#current-play-time {float: left; width: 10%;font-size: 14px;text-align: right;}#progress-bar-box {background-color: #666;width: 90%;height: 1.5px;border-radius: 50px;margin: auto;border: 0px;}#progress-bar {width: 0%;height: 1.5px;border-radius: 50px;background-color: #fff;}#progress-bar-point {height: 6px;width: 6px;border-radius: 50%;cursor: pointer;background-color: #fff;}#end-play-time {float: right;width: 10%; text-align: left;font-size: 14px;}
</style>
</head>
<body style="background-color: #000"><!-- 音乐控制器 --><!-- 进度条 --><div id="progress-bar-module" class="clearfix d-flex"><!-- 当前播放时间 --><div id="current-play-time">0%</div><!-- 进度条盒子 --><div class="progress-bar-item" style="width: 80%; margin: auto;"><!-- 进度条有效范围 --><div id="progress-bar-box" class="d-flex align-items-center"><!-- 进度条播放进度 --><div id="progress-bar"></div><!-- 进度条小圆点 --><div id="progress-bar-point"></div></div></div><!-- 音频总时长 --><div id="end-play-time">100%</div></div>
</body>
</html><script>
//移动端触摸事件
var progress_bar_point = document.getElementById('progress-bar-point')
var progress_bar_box = document.getElementById('progress-bar-box')
//移动端触摸屏幕时触发ontouchstart
progress_bar_box.ontouchstart = () => {progress_bar_point.style.width = '15px'progress_bar_point.style.height = '15px'//移动端拖拽时触发progress_bar_box.ontouchmove = (e) => {console.log(e)// 触点相对于HTML文档左边沿的X坐标。console.log(e.targetTouches[0].pageX)// 当前元素相对于 offsetParent 节点左边界的偏移像素值。console.log(progress_bar_box.offsetLeft)// 进度条的进度console.log(e.targetTouches[0].pageX-progress_bar_box.offsetLeft)//进度条总长度console.log(progress_bar_box.offsetWidth)progress_play = Number((e.targetTouches[0].pageX - progress_bar_box.offsetLeft) / progress_bar_box.offsetWidth) * 100if(progress_play > 100) return progress_play = 100;if(progress_play < 0) return progress_play = 0;document.getElementById('progress-bar').style.width = `${progress_play}%`;document.getElementById('current-play-time').innerHTML = `${parseInt(progress_play)}%`;}//移动端触摸屏幕结束后触发progress_bar_box.ontouchend = () => { progress_bar_point.style.width = '6px'progress_bar_point.style.height = '6px'}
}
</script>
【JS教程】移动端 Touch（触摸）事件相关推荐
- 原生js实现移动端touch事件，解决穿透问题
四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取 ...
- touch触摸事件以及常用触摸功能
文章目录 前言 一.触摸事件 二. 事件对象 event 三. 功能案例 1. 检测滑动方向 2. 实现元素拖拽 3. 实现元素旋转 总结 前言 为了给基于触摸的用户界面提供高质量的支持,触摸事件提供 ...
- 移动端 touch 滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- Cocos2d-x处理Touch触摸事件Demo
请参考<Ubuntu18.04搭建Cocos2d开发环境>搭建项目 默认情况下,Cocos2d-x会将鼠标左点击当作触摸. 第一步:在/home/kyun/Desktop/Games/My ...
- 移动端浏览器触摸事件@touchstart=“touchstart“ @touchend=“touchend“ @touchmove=“touchmove“
touchstart 触摸开始,多点触控,后面的手指同样会触发 touchmove 接触点改变,滑动时 touchend 触摸结束,手指离开屏幕时
- js禁止移动端浏览器滚动事件以及取消（允许）还原浏览器滚动事件
1.禁止浏览器滚动 document.addEventListener('touchmove', function (event) {event.preventDefault(); }, false) ...
- HTML5滑动(swipe)事件,移动端触摸（touch）事件
目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现. 但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touc ...
- JavaScript-移动端(touch事件)
一.touch触摸事件 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触发 二.触摸事件对象 ...
- 43个处理触摸事件的jQuery插件
随着移动端出现,Web上有很多问题出现,比如说触摸事件(Touch Event).随着问题的出现,总是有很多解决方案的.通过jQuery插件为移动端解决触摸事件.我想你知道一些jQuery插件,或许会 ...
- 为了讲清楚Android触摸事件，我“拆了部手机”
Android 是一个有用户界面(GUI)的操作系统,在它诞生之初,就是为带有触摸屏的手持设备准备的.作为提供给用户最重要的交互方式之一,了解触摸系统是怎么工作的,对于实际的项目开发有着非常大的帮助. ...
最新文章
- mysql事务处理用法与实例详解
- 【Codeforces1327A】: Sum of Odd Intergers C/C++题解
- activiti mysql数据库表_Mysql安装activiti数据库的2种解决办法
- 【GitHub教程】如何使用Eclipse将本地项目上传到github
- easyui 点滴记录
- 简单工厂和策略模式结合
- 产品经理有话说！这个报表神器更新了6大功能，绝对亮眼
- 3.索引与string进行映射实现高效查找
- 前端同时访问后端同一接口两次，但只有后面那次请求有返回数据
- SLAＭ算法开发中，Ｃ++编程+多节点的正确调试方法
- 用python将九九乘法口诀表打印在Excel中
- C#（十三）之字符串string
- 数据结构（10）广义表的介绍与代码实现（c语言）
- 20189200余超 2018-2019-2 移动平台应用开发实践第十一周作业
- 【渝粤题库】广东开放大学 管理学基础 形成性考核
- OPM泄漏事故报告：矛头直指领导对数据丢失无作为
- 马云卸任，互联网行业的变动，身处其中的年轻人该注意些什么？
- 抖音只能上下滑动吗_仿抖音上下滑动播放视频
- 推荐8个Github上能赚钱的小程序源码
- 用Python选一个自己的股票池！堪比资深的炒股选手！