移动端事件touchstart、touchmove、touchend详解
在PC端上的JS事件相信大家已经熟悉不少,诸如click\mouseover这类事件,都可以满足交互的需要,虽然移动端上的事件可能平常稍有接触,但是可能不太了解其中具体的用法区别。
前言:
这几个事件最早出现于IOS safari中,为了向开发人员转达一些特殊的信息,所以新增了这些事件,随着Android中的webkit的加入,慢慢地这样的专有事件成了事实的标准,从而导致W3C开始指定Touch Event规范的内容。
具体说来有这样几个事件:
- touchstart 手指触摸屏幕时触发,即使已经有手指在屏幕上也会触发。
- touchmove 手指在屏幕滑动时触发。
- touchend 手指从屏幕时移开时触发。
事件定义的方式:
大致上分为DOM0事件和DOM2事件两种.
DMO0事件,就是传统的直接将事件作为属性设置的形式:
div1.ontouchstart = function(){alert(1);}
复制代码
DOM2事件,则是用addEventListener的方式来绑定事件处理程序:
div1.addEventListener("touchstart",function(){alert(1);});
复制代码
大多数时候不推崇第一种方式,这种方式在移动端使用时好时坏,不建议使用。
PC的事件比移动端上的事件响应的慢300ms:
在早期的手机上,浏览器为了能够实现放大和缩放功能,采用双击的方式来达到这样的交互效果,为了实现这样的效果,浏览器需要判断用户在第一次触碰屏幕之后,是否在300ms之内再次点击,有则表明用户希望缩放和放大,所以click事件会推迟到300ms之后运行。
var div = document.querySelector("#div");div.onclick = function(){console.log("click!");}div.ontouchstart = function(){console.log("touchstart!");}
复制代码
可以看到每次点击,touchstart总会先于click事件运行。 当然这方面的问题有专门的库用于解决延迟的问题。诸如:Fastclick
点击穿透问题:
这个问题在当有一个绝对定位或固定定位元素绑定了touch事件,那么覆盖在他之下的具有点击特性的元素也会被触发。
比如:
有一个遮罩层A元素,他的底下有一个链接元素B.
当这个遮罩层点击之后希望遮罩层消失,真实的状况是这时候点击遮罩层不见的同时会跳转页面。
复制代码
这是为什么? 前面说过了touchstart会先于click事件执行,当上述的这个遮罩层消失在300ms之内消失时,那么他底下的具有点击特性的元素会被触发。大家可以私下模拟上述的例子。
如何解决?
下层元素不使用点击特性的元素
我可以去某宝的移动版网站上看,他首页使用的多层的DIV来代替A标签
这种方法不太推荐,因为a标签能够为SEO提供一些信息
阻止所有点击:
document.addEventListener("click",function(ev){ev.preventDefault();
})
document.addEventListener("touchstart",function(ev){ev.preventDefault();
})
复制代码
这时候的有点击特性的元素的交互行为将会失效,当然也可以根据实际需要重新开启交互行为。
代码如下:
a.ontouchstart = function(){window.location = this.href;}
复制代码
这样既兼顾了SEO又可以安然使用点击事件。当然它还有其他的好处。
- 能够阻止IOS10缩放: 对于ISO10设置meta标签禁止缩放是没有作用的,上面的代码阻止了浏览器的默认行为。
- 阻止IOS10下回弹效果
- 去除系统滚动条
- 禁止长按选中文字和图片:当然也同时阻止了input获取焦点的行为,这就需要使用单独为input添加一个阻止冒泡的行为。以免事件冒泡至顶层元素而被阻止交互行为。
input.ontouchstart = function(ev){ev.stopPropagation();
}
复制代码
移动端事件对象:
注意到前面的例子里每一个事件处理程序都有一个evt的参数了吗,那是有关于当前触摸的相关信息,通过这样一个对象,能够获取到当前触碰的坐标,触碰的手指个数等等。 其中最重要的常用的莫过于手指列表了。
touches:当前位于屏幕下的手指列表信息
targetTouches: 当前位于当前元素下的手指列表信息
changedTouches: 当前涉及到当前事件的手指列表
复制代码
这三个手指列表都存在触碰事件对象里面,在每次发生触碰之后这里的列表都会更新。
var div = document.querySelector("#div");div.ontouchmove = function(evt){this.innerHTML = `touches-length:${evt.touches.length}targetTouches-length:${evt.targetTouches.length}changedTouches-length:${evt.changedTouches.length}`console.log(evt);}
复制代码
以上实例,在手指移动于DIV上之后会更新DIV的内容。 分别展示了touches、targetTouches、changedTouches的手指个数
感谢阅读!希望能共同进步!
移动端事件touchstart、touchmove、touchend详解相关推荐
- 移动端事件touchstart touchmove touchend 动画事件 过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击 移动端的三个事件 ...
- JavaScript touch 事件 touchstart touchmove touchend
JavaScript touch 事件 touchstart touchmove touchend MDN 官方文档: https://developer.mozilla.org/en-US/docs ...
- 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
- 移动web JavaScript,事件(touchstart,touchmove,touchend)
demo(认识点击时间差).html: <!DOCTYPE html> <html lang="en"> <head><meta name ...
- WCF服务端运行时架构体系详解[下篇]
作为WCF中一个核心概念,终结点在不同的语境中实际上指代不同的对象.站在服务描述的角度,我们所说的终结点实际上是指ServiceEndpoint对象.如果站在WCF服务端运行时框架来说,终结点实际上指 ...
- 移动端JQ插件hammer使用详解
** 移动端JQ插件hammer使用详解 ** 用法: 1,首先引入jq2.0以上版本和jquery.hammer.js. 2,获取元素,和jq一样,在后面加上hammer就可以了 var hamme ...
- Web端即时通讯技术原理详解
Web端即时通讯技术原理详解 前言 在web端的IM即时通讯应用,由于浏览器的兼容性以及其固有的"客户端请求服务器处理并响应"的C/S通信模型,造成了要在浏览器中实现一个兼容性较好 ...
- ios无痕埋点_移动端无痕埋点实践详解(二)
0x01 前言 在移动端无痕埋点实践详解(一)这篇文章大致总结了移动端无痕埋点的基本原理.主要介绍了什么是无痕埋点,无痕埋点的基础数据流程以及在Android系统上总体思路.这篇文章着重总结下无痕埋点 ...
- python 录制web视频_Python django框架 web端视频加密的实例详解
视频加密流程图: 后端获取保利威的视频播放授权token,提供接口api给前端 参考文档:http://dev.polyv.net/2019/videoproduct/v-api/v-api-play ...
- vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mous ...
最新文章
- STM8S103 解决Rom空间不足 Map文件分析
- 给新创建的用户 赋予所有的权利 *.* 查看权限 删除用户 ---------DCL用户权限管理篇...
- mysql 存储过程 动态建表_MySQL存储过程动态创建表,数据分表
- CentOS上修改用户名
- linux 可执行文件与写操作的同步问题
- SpringBoot-SpringCloud-版本对应关系
- P2617 Dynamic Rankings(整体二分)
- 3d激光雷达开发(平面映射)
- c语言dp算法,C++动态规划dp算法题
- 百度网盘不能上传超过百兆的文件?
- 【面试记录1】爱立信5G基带开发工程师
- 随机划分训练集和测试集
- 制图中比例尺的一些问题
- 教你如何养微信小号,什么样的号可以群爆粉?
- 猿创征文|【云原生】学习云原生经验分享
- 我们怎样制作照片拼图?简单实用的拼图方法来了
- 脱壳工具 postern.apk文件
- 【图解HTTP】|【09】Web的攻击技术
- 打印机一直不停打乱码的解决方法
- http状态码有哪些 ,表示了什么