移动端touch事件

155 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天juejin.cn/post/712312…

H5新增事件

属性描述
onberforeunloadScript即将离开当前页面(书信或关闭)时触发
onpagehideScript用户浏览网页时触发
onpageshowScript当窗口成为可见时运行的脚本
onafterprintScript文档打印之后运行的脚本
onberforeprintScript文档打印之前运行的脚本
onerrorScript在错误发生时运行的脚本
onhaschangeScript在文档已改变时运行的脚本
OnmessageScript在消息被触发时运行的脚本
onofflineScript当文档离线时运行的脚本
ononlineScript当文档上线运行时的脚本
onpostateScript当窗口历史记录改变时运行的脚本
onresizeScript当问当执行窗口被调整大小时触发
onstorageScript在web Storage区域更新后运行的脚本
onundoScript在文档执行undo时运行的脚本

1. H5新增表单事件*

Onformchange    目前所有浏览器都不支持,还没有真正执行(只要表单里的任何一个表单项改变,就会触发)

Onforminput      目前所有浏览器都不支持,还没有真正执行(只要表单里的任何一个表单项改变,就会触发)

 

oninput 表单内容被修改时触发

oninvalid   当元素无效时运行的脚本(得是表单带有自动验证的表单项email/tel/没有通过时,就会触发该事件)

Touch事件

touchstart  触摸开始时触发

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

touchend 触摸结束时触发

touchcancel    被打断时触发的事件,比如玩着手机来电话了

touch事件使用事件监听方式来绑定事件addEventListenter(“touch事件”,function(){ })

**onclick和touchstart事件的区别 **

onclick触发的事件要比touchstart事件晚,大概晚300毫秒

 

事件对象和pc端事件对象的区别

每个触摸事件都包含三个触摸列表,每个列表里包含了对应的一系列触摸点。

touches  当前屏幕的所有手指的一个列表

targettouches当前dom元素上的手指的一个列表

changedTouches涉及当前事件的手指的一个列表

触摸列表都是数组对象

 

每个touch对象包含的属性

identifier一个数值,表示触摸会话中当前手指的id

clientX触摸目标在当前窗口x坐标

clientY触摸目标在当前窗口Y坐标

screenX触摸目标在屏幕的X坐标

screenY触摸目标在屏幕的Y坐标

pageX触摸目标在页面中的X坐标

pageY触摸目标在当前页的Y坐标

target触摸的DOM节点目标

 

手势事件(手机其实是不支持这三个时间的,所以别用)

gestyresstart:当一个手指已经按在屏幕上了,而另一个手指又触摸在屏幕上时触发

gesturechange当触摸屏幕的任何一个手指的位置发生变化是触发

gestured

 

手势事件插件