Js 手指事件

摘要:
当按下手指时,将触发ontouchstart;当手指移动时,将触发ontouchmove;当手指被移除时,本体接触被触发。特别是,只有在触发另一个触摸屏事件时,才会触发上一个事件的mouseout事件。

1、Touch事件简介

 
pc上的web页面鼠标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移动终端如iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。
 
当按下手指时,触发ontouchstart;
当移动手指时,触发ontouchmove;
当移走手指时,触发ontouchend。
当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。
 
 
2、Touch事件与Mouse事件的出发关系
 
在触屏操作后,手指提起的一刹那(即发生ontouchend后),系统会判断接收到事件的element的内容是否被改变,如果内容被改变,接下来的事件都不会触发,如果没有改变,会按照mousedown,mouseup,click的顺序触发事件。特别需要提到的是,只有再触发一个触屏事件时,才会触发上一个事件的mouseout事件。
 
 
3、gesture事件
 
Gesture事件,包括手指点击(click),轻拂(flick),双击(double-click),手指的分开、闭合(scale)、转动(rotate)等一切手指能在屏幕上做的事情,它只在有两根或多根手指放在屏幕上的时候触发,事件处理函数中会得到一个GestureEvent类型的参数,它包含了手指的scale(两根移动过程中分开的比例)信息和rotation(两根手指间连线转动的角度)信息。这个事件是对touch事件的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,gestureend。
gesture事件触发过程:
Step 1、第一根手指放下,触发touchstart
Step 2、第二根手指放下,触发gesturestart
Step 3、触发第二根手指的touchstart
Step 4、立即触发gesturechange
Step 5、手指移动,持续触发gesturechange,就像鼠标在屏幕上移动的时候不停触发mousemove一样
Step 6、第二根手指提起,触发gestureend,以后将不会再触发gesturechange
Step 7、触发第二根手指的touchend
Step 8、触发touchstart!注意,多根手指在屏幕上,提起一根,会刷新一次全局touch!重新触发第一根手指的touchstart
Step 9、提起第一根手指,触发touchend
 
 
另在w3school上看到可以这样来判断平台:
function checkStation(){
var info = navigator.userAgent;
if(info.indexOf("iPod")!=-1 || info.indexOf("iPad")!=-1 || info.indexOf("iPhone")!=-1 || info.indexOf("Android")!=-1){
alert("平板");
return true;
}else{
alert("电脑");
return false;
}
}

免责声明:文章转载自《Js 手指事件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇InfluxDB学习(一):基本概念和安装Golang基础编程(四)-Map(集合)、Slice(切片)、Range下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

NodeJs使用jwt生成token以及使用express-jwt校验和解密token

=0){//当数据库有当前用户时,它返回tokenlettoken=jwt.sign;res.send}else{res.send}}catch{//p抛出异常并将其发送到错误中间件以处理console.log;next;}})//注册接口路由器。post('/register',异步(req,res,next)=˃{let{用户名,密码,昵称}=req-b...

解决微信公众平台接口配置信息配置失败问题

填写完URL和TOKEN后,当您单击“提交”时,系统将始终提示您“配置失败”或其他错误,以确认URL所指向的后台页面代码是否正常。请确认TOKEN配置是否正常。此时,请检查INDEX页面的编码格式,并将其更改为GB2312进行尝试,这可能会解决您的问题。我想把这篇文章献给我浮躁的自己。...

「雕爷学编程」Arduino动手做(26)——4X4矩阵键盘模块

37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。108种传感器模块系列实验实验二十六:4X4矩阵键盘模块矩阵键盘是单片机外部设备中所使用的排布类似于矩阵的键盘组。工作原理矩阵键盘又称为行列式键盘,它是用4条I/O线作为行线,4条I/O线作为列线组成的键盘。矩阵键盘所需库文件在ArduinoIDE1.8.0...

LaTeX表格tabular背景色添加技巧 [转]

我们所用的宏包为colortbl,这个宏包可以设置表格中数据、文本、行、列、单元格前景和背景以及边框的颜色,从而得到彩色表格。同时需要array和color两个宏包的支持。宏包提供了一组着色命令,经常用到是列着色命令,其格式为:\columncolor[色系]{色名}[左伸出][右伸出]。常用色系有三原色rgb灰度gray和四色cmyk三种;被预定义的色名有...

谷歌浏览器中预览海康大华等监控视频的思路与方法

本人近些年来对海康,大华,宇视等视频厂商做过一些视频对接的开发,但始终存在一个问题,在谷歌浏览器中如何进行视频监控的预览。本文将主要解决在谷歌,火狐等非IE浏览器中预览视频监控问题,给广大开发者提供一个思路方法。现在谷歌浏览器中现已不支持ActiveXObject的创建及调用,这是由于chrome浏览器在45版本后不再提供对npapi插件的支持。这种方式基本...

推荐几种加快火狐浏览器速度的办法

键入browser.cache。内存容量,指定值65536。确认后,重新启动Firefox以获得更大的缓存。这对于减少数据传输非常有帮助,特别是如果您的月流量有限,并且它几乎可以使Firefox浏览器的性能翻倍。...