移动端 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. ...
随机推荐
- JSP ajax跨域问题 怎么处理 原因：CORS 头缺少 'Access-Control-Allow-Origin'）。 ajax http 415
/** * Project Name:cm2mManage * File Name:CrossSiteFilter.java * Package Name:com.yoxnet.serverframe ...
- CSS代码使纯英文数字自动换行
当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行.这个问题如何解决?先来认 ...
- win2003以isapi的方式配置php+mysql环境（安装了shopEX）
一.准备相关组件 mysql-installer-community-5.5.29.0.zip php-5.2.17-Win32-VC6-x86 ZendOptimizer-3.3.3-Windows ...
- [leetcode]_Integer to Roman
题目:对应之前那道将罗马数字转换整型数字的题目.反过来. 思路:刚开始做的时候,想着用程序进行判断,复杂的要死.网络了别人代码,非常清晰. 代码: 1 public String intToRoman ...
- 将List<T>转化成 DataTable--调整可空类型的转化错误
加载表结构并保持成XML string cmdText = @"select * from kb_lable_temp where 1=2"; using (SqlConnecti ...
- php生成excel文件的简单方法
生成excel文件,最简单的莫过于把数据库的数据导入到excel就行了. 生成excel 当然使用的是 phpExcel http://www.jbxue.com/tags/phpexcel.html ...
- PHP file_get_contents于curl性能效率比较
说明大部分内容整理来源于网络,期待你的补充.及不当之处的纠正: 1)fopen/file_get_contents 每次请求远程URL中的数据都会重新做DNS查询,并不对DNS信息进行缓存.但是CUR ...
- 状态可以通过动画切换的按钮--第三方开源--TickPlusDrawable
Android tickplusdrawable(TickPlusDrawable)在github上的项目主页是:https://github.com/flavienlaurent/tickplusd ...
- sendBroadcast 无法接收
项目中遇到已经sendbroadcast,但是在对应的BroadcastReceiver中却无法调用onReceiver 真是个纠结的问题.找了许久. 终于发现Intent中传递了一个参数(自定义类继 ...
- Python初学者笔记：打印出斐波那契数列的前10项
问题:斐波那契数列(意大利语: Successione di Fibonacci),又称黄金分割数列.费波那西数列.费波拿契数.费氏数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21.- ...