触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例
触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例
iOS版 Safari为了向开发人员传达一些特殊信息，新增了一些专有事件。因为 iOS设备既没有鼠标 也没有键盘，所以在为移动 Safari开发交互性网页时，常规的鼠标和键盘事件根本不够用。随着 Android 中的 WebKit 的加入，很多这样的专有事件变成了事实标准，导致 W3C开始制定 Touch Events规范（参 见 https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html）。以下介绍的事件只针对触摸设备。
触摸事件包含 iOS 2.0软件的 iPhone 3G发布时，也包含了一个新版本的 Safari浏览器。这款新的移动 Safari 提供了一些与触摸（touch）操作相关的新事件。后来，Android上的浏览器也实现了相同的事件。触摸 事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。具体来说，有以下几个触 摸事件。
touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。
touchend：当手指从屏幕上移开时触发。
touchcancel：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。
上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在 DOM规范中定义，但它们却 是以兼容 DOM的方式实现的。因此，每个触摸事件的 event 对象都提供了在鼠标事件中常见的属性： bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 ctrlKey 和 metaKey。
除了常见的 DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。
touches：表示当前跟踪的触摸操作的 Touch 对象的数组。
targetTouchs：特定于事件目标的 Touch 对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的 Touch 对象的数组。 每个 Touch 对象包含下列属性。
clientX：触摸目标在视口中的 x坐标。
clientY：触摸目标在视口中的 y坐标。
identifier：标识触摸的唯一 ID。
pageX：触摸目标在页面中的 x坐标。
pageY：触摸目标在页面中的 y坐标。
screenX：触摸目标在屏幕中的 x坐标。
screenY：触摸目标在屏幕中的 y坐标。
target：触摸的 DOM节点目标。 使用这些属性可以跟踪用户对屏幕的触摸操作。来看下面的例子。
<!DOCTYPE html>
<html>
<head>
<title>Touch Events Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<p>Touch anywhere on the screen. This only works on an iPhone or iPod Touch running iPhone 2.x software.</p>
<div id="output">
</div>
<script type="text/javascript">
function handleTouchEvent(event){
//只跟踪一次触摸
if (event.touches.length == 1){
var output = document.getElementById("output");
switch(event.type){
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //prevent scrolling
output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
}
}
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);
</script>
</body>
</html>
以上代码会跟踪屏幕上发生的一次触摸操作。为简单起见，只会在有一次活动触摸操作的情况下输 出信息。当 touchstart 事件发生时，会将触摸的位置信息输出到<div>元素中。当 touchmove 事件 发生时，会取消其默认行为，阻止滚动（触摸移动的默认行为是滚动页面），然后输出触摸操作的变化 信息。而 touchend 事件则会输出有关触摸操作的终信息。注意，在 touchend 事件发生时，touches 集合中就没有任何 Touch 对象了，因为不存在活动的触摸操作；此时，就必须转而使用 changeTouchs 集合。
这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素 时，这些事件（包括鼠标事件）发生的顺序如下：
(1)touchstart
(2) mouseover
(3) mousemove（一次）
(4) mousedown
(5) mouseup
(6) click
(7) touchend
支持触摸事件的浏览器包括 iOS版 Safari、Android版 WebKit、bada版 Dolfin、OS6+中的 BlackBerry WebKit、Opera Mobile 10.1+和 LG专有 OS中的 Phantom浏览器。目前只有 iOS版 Safari支持多点触摸。 桌面版 Firefox 6+和 Chrome也支持触摸事件。
以下是四种touch事件
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素
注意：
手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。
1.禁止缩放
通过meta元标签来设置。
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
2.禁止滚动
preventDefault是阻止默认行为，touch事件的默认行为就是滚动。
event.preventDefault();
案例：
下面给出一个案例，需在移动设备上才能看出效果。
1.定义touchstart的事件处理函数，并绑定事件：
if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false);
//定义touchstart的事件处理函数
start:function(event){
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值
isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
this.slider.addEventListener('touchmove',this,false);
this.slider.addEventListener('touchend',this,false);
},
触发touchstart事件后，会产生一个event对象，event对象里包括触摸列表，获得屏幕上的第一个touch,并记下其pageX,pageY的坐标。定义一个变量标记滚动的方向。此时绑定touchmove,touchend事件。
2.定义手指在屏幕上移动的事件，定义touchmove函数。
//移动
move:function(event){
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时，表示纵向滑动，0为横向滑动
if(isScrolling === 0){
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
this.slider.className = 'cnt';
this.slider.style.left = -this.index*600 + endPos.x + 'px';
}
},
同样首先阻止页面的滚屏行为，touchmove触发后，会生成一个event对象，在event对象中获取touches触屏列表，取得第一个touch,并记下pageX,pageY的坐标，算出差值，得出手指滑动的偏移量，使当前DOM元素滑动。
3.定义手指从屏幕上拿起的事件，定义touchend函数。
//滑动释放
end:function(event){
var duration = +new Date - startPos.time; //滑动的持续时间
if(isScrolling === 0){ //当为水平滚动时
this.icon[this.index].className = '';
if(Number(duration) > 10){
//判断是左移还是右移，当偏移量大于10时执行
if(endPos.x > 10){
if(this.index !== 0) this.index -= 1;
}else if(endPos.x < -10){
if(this.index !== this.icon.length-1) this.index += 1;
}
}
this.icon[this.index].className = 'curr';
this.slider.className = 'cnt f-anim';
this.slider.style.left = -this.index*600 + 'px';
}
//解绑事件
this.slider.removeEventListener('touchmove',this,false);
this.slider.removeEventListener('touchend',this,false);
},
手指离开屏幕后，所执行的函数。这里先判断手指停留屏幕上的时间，如果时间太短，则不执行该函数。再判断手指是左滑动还是右滑动，分别执行不同的操作。最后很重要的一点是移除touchmove,touchend绑定事件。
转载于:https://www.cnblogs.com/huangleilei/p/7305109.html
触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例相关推荐
- python 外部参数过长_介绍python中slice参数过长的处理方法及实例
python教程栏目介绍slice参数过长的处理方法 很多小伙伴对于slice参数的概念理解停留在概念上,切片的参数有三个,分别是step .start .stop .因为参数的值也是多变的,所以我们 ...
- 移动端触摸事件中touchstar、touchmove、touchend、touchcancel事件
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- 移动端事件touchstart touchmove touchend 动画事件 过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击 移动端的三个事件 ...
- android按钮点击toast,关于button点击事件中setOnClick等元素的解读以及方法?以及toast的位置以及作用？...
此文末参考链接: 此段代码的教程以及使用接口的方式.switch语句的教程链接为链接1. 汇总里说的有更多的实现方法,为链接2. 文中链接为视觉统一,链接均于文末,以上为方便文中跳转,加了文中的跳转链 ...
- 移动端事件（touchstart+touchmove+touchend）
移动端事件有哪些: 触摸事件 手势事件 传感器事件 (后面两个兼容性不怎么样,因此重点就是触摸事件) 触摸事件: touch 事件 pointer 事件 (PC端可能会使用jQuery做动画,移动端一 ...
- GridView控件RowDataBound事件中获取列字段的几种方法(转)
GridView是ASP.NET中功能强大的数据显示控件,它的RowDataBound事件为我们提供了方便的控制行.列数据的途径. 软件开发网 www.mscto.com 要获取当前行的某个数据列,有 ...
- 父元素事件中禁止子元素的事件
今天有同事过来找我,,,input checkbox 区域太小了,想在外层TD上加上点击事件,但发现TD加了后,,,input也在里面,会被执行两次,记录一下,我写的DOME <!DOCTYPE ...
- Excel中工作表间的关联链接方法及实例
或许大家经常看到类似于这样的一种效果:在excel教程工作簿中有很多工作表,在最前面为所有工作表添加一个目录表.当点击了目录表中某个工作表的名字,就自动激活相应的工作表. 其实这样的效果实现方法有多种 ...
- 触摸事件中touchstart、touchmove、touchend、touchcancel事件应用方法及实例
触摸事件中touchstar.touchmove.touchend.touchcancel事件应用方法及实例 一. 分享到: 前面我们介绍过移动设备中一些设备事件,例如手机旋转90度.倾斜等设置放置姿 ...
最新文章
- 开源一个上架App Store的相机App
- 调整ViewState的位置，让你的asp.net页面对搜索引擎更友好
- 从音乐分享平台到泛音乐视频社交平台，菠萝 BOLO完成过亿元 B 轮融资
- 什么才是软件开发的葵花宝典？
- Photoshop CS5软件安装资料及教程
- 基于 SpringBoot2 + MybatisPlus 的商城管理系统（附源码）
- Nest Secure智能保全系统内建麦克风 引发用户反弹
- c++并发编程之thread::join()和thread::detach()（转）
- 解决Eclipse 64位启动时，报jvm.dll错
- MySql存储过程语法及事例
- 《老路用得上的商学课1—5》成本
- Windows的cmd统计文件行数
- 第6章 分支语句和逻辑运算符
- linux遇到hint:num lock on
- 如何批量查询百度指数
- python爬虫——利用超级鹰识别验证码并进行古诗网进行模拟登录
- 淘宝商城 入住费用
- raspberrypi三天玩能人脸识别
- 卷积神经网络中全连接层、softmax与softmax loss理解
- openGL ES进阶教程（五）制作一个简单的VR播放器，播放全景视频