移动端 js touch事件
随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页，我们平时在pc浏览器上用的鼠标事件，比如：click, mouseover等， 已经无法满足移动设备触摸屏的特点，触摸时代的到来，离不开那些触摸事件。
触摸事件包含4个接口。
TouchEvent
代表当触摸行为在平面上变化的时候发生的事件.
Touch
代表用户手指与触摸平面间的一个接触点.
TouchList
代表一系列的Touch; 一般在用户多个手指同时接触触控平面时使用这个接口.
DocumentTouch
包含了一些创建 Touch对象与TouchList对象的便捷方法.
（参考于 https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events ）
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，用来控制触摸设备上的多点触控特性。
官网： http://hammerjs.github.io/
多点触摸的实现，想了解更多可以参考： http://www.cnblogs.com/iamlilinfeng/p/4239957.htm
zepto是轻量级兼容juqery的库，适用于移动端开发, 具体使用方法，可参看官网, http://zeptojs.com/
zepto touch 是用于单点手势触发的一个touch事件模块。
Touch.js 下载地址： https://github.com/madrobby/zepto/blob/master/src/touch.js
先看zepto的touch模块实现：
$(document)
.on('touchstart ...',function(e){
...
...
now = Date.now()
delta = now - (touch.last || now)
if (delta > && delta <= ) touch.isDoubleTap = true
touch.last = now
})
.on('touchmove ...', function(e){
})
.on('touchend ...', function(e){
...
if (deltaX < && deltaY < ) {
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 等,
下载地址 https://github.com/ftlabs/fastclick
调用很简单：
$(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是有效的，可以阻止冒泡，也可以阻止浏览器默认事件。
http://www.cnblogs.com/yexiaochai/p/3442220.html
2、利用fastclick的事件原理， 直接写一段， 采用 e.preventDefault(); 阻止“默认行为”，将事件绑定到dom元素上，缺点在于不能使用事件代理。
elem.addEventListener(touchend, function(e){
e.preventDefault()
},false);
3. 在事件捕获阶段，如果时间差，位置差，均小于指定的值，就阻止冒泡和默认click事件的触发。
4． 用户点击的时候“弹出”一个顶层DIV，屏蔽掉所有事件传递，然后定时自动隐藏, 这个方法比较巧妙。
参考：
tap 模块
https://github.com/alexgibson/tap.js
ghost click
http://ariatemplates.com/blog/2014/05/ghost-clicks-in-mobile-browsers/
JavaScript和事件
http://f2e.im/t/850
备注：文章系原创和技术资料的心得总结，欢迎交流，多提宝贵意见。
移动端 js touch事件的更多相关文章
- js Touch事件（向左滑动，后退）
js Touch事件(向左滑动,后退) 代码如下 var touch_p = { c_x : 0, c_y : 0, hasbacked : false }; function touches(ev) ...
- 移动端-js触摸事件
开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...
- 关于js touch事件 的引用设置
一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...
- 移动端的touch事件（一）
如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢?? 诸如智能手机和平板电脑一类的移动设备通常会有 ...
- 「移动端」touch事件，touchEvent对象
随着智能手机普及,有越来越多的手机网页和网页版游戏,手机触摸.移动.旋转等等,多种操作.一般电脑的人机交互靠的是鼠标,而手机用的就是触摸.区别有: PC 端一个电脑只能有一个鼠标,而移动端有多点触摸. ...
- 浅谈移动端之touch事件--手指的滑动事件
今天台风‘海马’袭击深圳,全市停工.现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touch ...
- 移动端html touch事件
诸如智能手机和平板电脑一类的移动设备通常会有一(capacitive touch-sensitivescreen),以捕捉用户的手指所做的交互.随着移动网络的发展,其能够支持越来越复杂的应用,web开 ...
- 移动端之touch事件--手指的滑动事件
转自[B5教程网]:http://www.bcty365.com/content-142-5243-1.html 总结:touchmove的最后坐标减去touchstart的起始坐标.X的结果如果正数 ...
- 《移动端浏览器Touch事件判断手指滑动方向方法》
$("body").on("touchstart", function(e) { e.preventDefault(); startX = e. ...
随机推荐
- Template_Method
#include <iostream> using namespace std; #define DESTROY_POINTER(ptr) if (ptr) { delete ptr; p ...
- SQL Server编程（05）游标
在关系数据库中,我们对于查询的思考是面向集合的.而游标打破了这一规则,游标使得我们思考方式变为逐行进行.对于类C的开发人员来着,这样的思考方式会更加舒服. 正常面向集合的思维方式是: 而对于游标来说: ...
- [译]Cassandra的数据读写与压缩
本文翻译主要来自Datastax的cassandra1.2文档.http://www.datastax.com/documentation/cassandra/1.2/index.html.此外还有一 ...
- Mac上添加adb_usb.ini
max上添加android驱动支持 用到的命令: 命令方式最简单,键入如下两行命令你就可以实现对文件的现实和隐藏功能了.这个时候肯定会有童鞋问:“在哪里敲命令呢?”,Launchpad——其他——终端 ...
- Delphi中TStringList类常用属性方法详解
TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...
- sql server 判断是否存在数据库，表，列，视图
1 判断数据库是否存在if exists (select * from sys.databases where name = '数据库名') drop database [数据库名] 2 判断表 ...
- wpf的datepicker处理
如果有2个datepicker,控制时间起和止的话,可以把第二个datepicker加一个属性,DisplayDateStart = "{Binding SelectedDate,Eleme ...
- java下的redis操作
Java操作redis(增删改查) Java代码 package sgh.main.powersite; import java.util.ArrayList; import java.util.Ha ...
- window7部署solr 4.7
环境:win7 + tomcat 7.0.50 + solr 4.7 备注:C:\solr-4.7.0为solr.zip解压后的目录 C:\apache-tomcat-7.0.50为tomcat目录 ...
- hdu 2094 产生冠军
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=2094 产生冠军 Description 有一群人,打乒乓球比赛,两两捉对撕杀,每两个人之间最多打一场比 ...