移动端jstouch事件
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
移动端jstouch事件
随着智能⼿机和平板电脑的普及, 越来越多的⼈⽤移动设备浏览⽹页，我们平时在pc浏览器上⽤的⿏标事件，⽐如：click, mouseover等，已经⽆法满⾜移动设备触摸屏的特点，触摸时代的到来，离不开那些触摸事件。
触摸事件包含4个接⼝。
TouchEvent
代表当触摸⾏为在平⾯上变化的时候发⽣的事件.
Touch
代表⽤户⼿指与触摸平⾯间的⼀个接触点.
TouchList
代表⼀系列的Touch; ⼀般在⽤户多个⼿指同时接触触控平⾯时使⽤这个接⼝.
DocumentTouch
包含了⼀些创建 Touch对象与TouchList对象的便捷⽅法.
TouchEvent接⼝可以响应基本触摸事件（如单个⼿指点击），它包含了⼀些具体的事件，
事件类型：
touchstart : 触摸开始（⼿指放在触摸屏上）
touchmove: 拖动（⼿指在触摸屏上移动）
touchend : 触摸结束（⼿指从触摸屏上移开）
touchenter ：移动的⼿指进⼊⼀个dom元素。
touchleave ：移动的⼿指离开⼀个dom元素。
还有⼀个touchcancel，是在拖动中断时候触发。
事件属性：
altKey : 该属性返回⼀个布尔值，表⽰在指定的事件发⽣时，Alt 键是否处于按下状态， event.altKey=true|false|1|0
type : 触摸时触发的事件类型，⽐如touchstart
每个触摸事件都包括了三个触摸属性列表：
1. touches：当前位于屏幕上的所有⼿指触摸点的⼀个列表。
2. targetTouches：当前元素对象上所有触摸点的列表。
3. changedTouches：涉及当前事件的触摸点的列表。
它们都是⼀个数组，每个元素代表⼀个触摸点。
每个触摸点对应的Touch都有三对重要的属性，clientX/clientY、pageX/pageY、screenX/screenY。
其中screenX/screenY代表事件发⽣的位置对于屏幕的偏移量，clientX/clienYt和pageX/pageY都代表事件发⽣位置对应对象的偏移量，不过区别是clientX/clientY不包括对象滚动⽽隐藏的偏移量，⽽pageX/pageY包括对象滚动⽽隐藏的偏移量。
移开屏幕的那个触摸点，只会包含在changedTouches列表中，⽽不会包含在touches 和targetTouches 列表中，所以changedTouches在项⽬当中会⽐较常⽤。
⽰例：
<body onload="start();">
<style type="text/css">
#dom {
width:500px;
height:500px;
background:black;
}
</style>
<div id="dom"></div>
<script type="text/javascript">
function onTouchStart(e){
console.log(e);
}
function start(){
var dom = document.getElementById('dom');
dom.addEventListener('touchstart', onTouchStart, false);
}
</script>
</body>
控制台输出如下：
触摸事件跟⿏标事件的触发先后顺序：
Touchstart > toucheend > mousemove > mousedown > mouseup > click
很多情况下触摸事件跟⿏标事件会同时触发（⽬的是为了让没有对触摸设备优化的代码仍然可以在触摸设备上正常⼯作），如果使⽤了触摸事件，可以调
⽤event.preventDefault()来阻⽌⿏标事件被触发。
⽽⼿指在屏幕上移动touchmove则不会触发⿏标事件和单击事件,在touchmove事件中加⼊preventDefault, 可以禁⽌浏览器滚动屏幕，也不会影响单击事件的触发。
以上事件，都系统内置的，可以直接使⽤，通过这些内置事件，可以组合成很多⾮原⽣的多点触摸⼿势touch⼿势。
Hammer.js是⼀个轻量级的JavaScript库，能让你的⽹站轻松实现触控事件, 它依赖于jQuery，⽤来控制触摸设备上的多点触控特性。
zepto touch 是⽤于单点⼿势触发的⼀个touch事件模块。
先看zepto的touch模块实现：
$(document)
.on('touchstart ...',function(e){
...
...
now = Date.now()
delta = now - (st || now)
if (delta > 0 && delta <= 250) touch.isDoubleTap = true
st = now
})
.on('touchmove ...', function(e){
})
.on('touchend ...', function(e){
...
if (deltaX < 30 && deltaY < 30) {
var event = $.Event('tap')
touch.el.trigger(event)
}
})
touch 模块绑定事件 touchstart, touchmove, touchend 到 document上，然后通过计算事件触发的时间差，位置差来实现⾃定义的tap，swipe事件。
⼿机上也有click事件，从触摸到响应click事件，有会300的毫秒的延迟，原因在于:
"Apple 准备发布iphone的时候，为了解决⼿机上web页⾯太⼩的问题，增加了双击屏幕放⼤的功能，(double tap to zoom )，当⽤户触摸屏幕的时候，浏览器不知道⽤户是要double tap还是要click，所以浏览器在第⼀次tap事件后会等300ms来判断到底是double tap还是click ，如果在300ms以内点击的话，会以为是double tap，反之是click。
"
去掉click事件 300ms 的⽅法：
(1) 在meta⾥，加 user-scalable=no 可以阻⽌双击放⼤，（缺点：部分浏览器⽀持）
(2) 使⽤fastclick.js 它利⽤多touchstart touchmove 等原⽣事件的封装，来实现⼿机上的各种⼿势，⽐如tap， swipe 等,
调⽤很简单：
$(function() {
FastClick.attach(document.body);
});
缺点：⽂件量有点⼤，为了解决⼀⼩延迟的问题，有点得不偿失。
⾃定义事件
// 创建事件对象
var obj = new Event('sina');
var elem = document.getElementById('dom');
//监听sina事件
elem.addEventListener('sina', function(e){
console.log(e);
},false);
//分发sina事件
elem.dispatchEvent(obj);
另外⼀个创建事件对象的⽅法是通过CustomEvent，相⽐于Event的好处是，它可以给处理事件的函数，⾃定义detail值，这在实际开发中，可能会经常⽤到。
// 创建事件对象
var obj = new window.CustomEvent('sina', {
detail: {'name': 'lily'}
});
var elem = document.getElementById('dom');
//监听sina事件
elem.addEventListener('sina', function(e){
// 可以接收到创建事件时，传⼊的detail值。
console.log(e. detail); // {'name': 'lily'}
},false);
//分发sina事件
elem.dispatchEvent(obj);
创建⾃定义事件，⼀个兼容性较好的函数：
zepto tap “点透”问题
Zepto 的tap事件是通过document绑定了touchstart和touchend事件实现，如果绑定tap⽅法的dom元素在tap⽅法触发后会隐藏、⽽“隐藏后，它底下同⼀位置正好有⼀个dom元素绑定了click的事件, ⽽clic事件有300ms延迟，触发click事件。
则会出现“点透”现象。
解决⽅案：
1 fastclick.js
它的实际原理是在⽬标元素上绑定touchstart ,touchend事件，然后在touchend这个库直接在touchend的时候就触发了dom上的click事件⽽替换了本来的触发时间，touch事件是绑定到了具体dom⽽不是document上,所以e.preventDefault是有效的，可以阻⽌冒泡，也可以阻⽌浏览器默认事件。
2、利⽤fastclick的事件原理，直接写⼀段，采⽤ e.preventDefault(); 阻⽌“默认⾏为”，将事件绑定到dom元素上，缺点在于不能使⽤事件代理。
elem.addEventListener(touchend, function(e){
e.preventDefault()
},false);
3. 在事件捕获阶段，如果时间差，位置差，均⼩于指定的值，就阻⽌冒泡和默认click事件的触发。
4．⽤户点击的时候“弹出”⼀个顶层DIV，屏蔽掉所有事件传递，然后定时⾃动隐藏, 这个⽅法⽐较巧妙。
参考：
tap 模块
ghost click
JavaScript和事件
备注：⽂章系原创和技术资料的⼼得总结，欢迎交流，多提宝贵意见。