一、 基础事件
1．click事件
单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟。
2007年第一代iphone发布，由于那个年代所有的网页都是针对大屏的pc端设计的，iphone的Safari浏览器为了让用户浏览网页的时候可以浏览到整个网页，把viewport设置为960px(参考前面的文章)，好是好，但是由于缩放了整个页面，导致内容变得非常小，视力6.0的都不一定看得清楚。
所以Safari浏览器自带了一个当时看起来相当酷的一个功能：双击缩放。你双击页面的时候，浏览器会智能的缩放当前页面到原始大小。
双击缩放的原理就是，当你click一次之后，会经过300ms之后检测是否再有一次click，如果有的话，就会缩放页面。否则的话就是一个click事件。
所以，当你想执行click操作的时候，就感觉到了”卡顿”。如果点击之后100ms之后没有反应，基本就有卡顿的感觉。
dblclick事件失效。
由于双击缩放的存在，pc端的dblclick事件也失效了。
2．touch类事件
1) 事件基础
触摸事件，有touchstart touchmove touchend touchcancel 四种之分
touchstart：手指触摸到屏幕会触发
当用户手指触摸到的触摸屏的时候触发。事件对象的 target 就是touch 发生位置的那个元素。
touchmove：当手指在屏幕上移动时，会触发
当用户在触摸屏上移动触点(手指)的时候，触发这个事件。一定是先要触发touchstart事件，再有可能触发 touchmove 事件。 touchmove 事件的target 与最先触发的 touchstart 的 target 保持一致。touchmove事件和鼠标的mousemove事件一样都会多次重复调用，所以，事件处理时不能有太多耗时操作。不同的设备，移动同样的距离 touchmove 事件的触发频率是不同的。 有一点需要注意：即使手指移出了 原来的target 元素，则 touchmove 仍然会被一直触发，而且 target 仍然是原来的 target 元素。
touchend：当手指离开屏幕时，会触发。
当用户的手指抬起的时候，会触发 touchend 事件。如果用户的手指从触屏设备的边缘移出了触屏设备，也会触发 touchend 事件。touchend 事件的 target 也是与 touchstart 的 target 一致，即使已经移出了元素。
touchcancel：可由系统进行的触发（如电话接入或者弹出信息），比如手指触摸屏幕的时候，突然电话来了，或者系统中其他打断了touch的行为，则可以触发该事件。
2) touch与click
当一个用户在点击屏幕的时候，系统会触发touch事件和click事件，touch事件优先处理，touch事件经过 捕获，处理, 冒泡 一系列流程处理完成后， 才回去触发click事件。
既然touch事件和click事件有了优先级别，那么能不能在touch阶段取消掉系统触发的click事件呢？当然是可以的，浏览器提供了这样的能力。在touch事件里面，调用e.preventDefault() 就可以阻止本次点击系统触发的click事件，即本次相关的click都不会执行。
targrt.addEventListener('touchstart', function(e) {
console.log(1);
e.preventDefault();
});
3) 点透现象
点透发生的条件****：
-
A 和 B不是后代继承关系(如果是后代继承关系的话，就直接是冒泡子类的话题了)
-
A发生touch， A touch后立即消失， B事件绑定click
-
A z-index大于B，即A显示在B浮层之上
点透发生的理由:
当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从文档树上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上面了。
解决办法：
targrt.addEventListener('touchend', function(e) {
e.preventDefault();
});
3．事件对象
TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。
每 个 Touch对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element描述。 TouchList 对象代表多个触点的一个列表.
1) TouchEvent
TouchEvent的属性继承了 UIEvent和 Event。
三个重要属性：
TouchEvent.changedTouches： 一个 TouchList 对象，包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch 对象。
TouchEvent.targetTouches： 一个 TouchList 对象，是包含了如下触点的 Touch 对象：触摸起始于当前事件的目标 element 上，并且仍然没有离开触摸平面的触点。
TouchEvent.touches： 一 个 TouchList 对象，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否发生了变化。
2) TouchList详解
只读属性：length返回这个TouchList中Touch对的个数。(就是有几个手指接触到了屏幕)
方法：item(index)返回TouchList中指定索引的Touch对象
3) Touch详解
image.png
1．click事件
单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟。
2007年第一代iphone发布，由于那个年代所有的网页都是针对大屏的pc端设计的，iphone的Safari浏览器为了让用户浏览网页的时候可以浏览到整个网页，把viewport设置为960px(参考前面的文章)，好是好，但是由于缩放了整个页面，导致内容变得非常小，视力6.0的都不一定看得清楚。
所以Safari浏览器自带了一个当时看起来相当酷的一个功能：双击缩放。你双击页面的时候，浏览器会智能的缩放当前页面到原始大小。
双击缩放的原理就是，当你click一次之后，会经过300ms之后检测是否再有一次click，如果有的话，就会缩放页面。否则的话就是一个click事件。
所以，当你想执行click操作的时候，就感觉到了”卡顿”。如果点击之后100ms之后没有反应，基本就有卡顿的感觉。
dblclick事件失效。
由于双击缩放的存在，pc端的dblclick事件也失效了。
2．touch类事件
1) 事件基础
触摸事件，有touchstart touchmove touchend touchcancel 四种之分
touchstart：手指触摸到屏幕会触发
当用户手指触摸到的触摸屏的时候触发。事件对象的 target 就是touch 发生位置的那个元素。
touchmove：当手指在屏幕上移动时，会触发
当用户在触摸屏上移动触点(手指)的时候，触发这个事件。一定是先要触发touchstart事件，再有可能触发 touchmove 事件。 touchmove 事件的target 与最先触发的 touchstart 的 target 保持一致。touchmove事件和鼠标的mousemove事件一样都会多次重复调用，所以，事件处理时不能有太多耗时操作。不同的设备，移动同样的距离 touchmove 事件的触发频率是不同的。 有一点需要注意：即使手指移出了 原来的target 元素，则 touchmove 仍然会被一直触发，而且 target 仍然是原来的 target 元素。
touchend：当手指离开屏幕时，会触发。
当用户的手指抬起的时候，会触发 touchend 事件。如果用户的手指从触屏设备的边缘移出了触屏设备，也会触发 touchend 事件。touchend 事件的 target 也是与 touchstart 的 target 一致，即使已经移出了元素。
touchcancel：可由系统进行的触发（如电话接入或者弹出信息），比如手指触摸屏幕的时候，突然电话来了，或者系统中其他打断了touch的行为，则可以触发该事件。
2) touch与click
当一个用户在点击屏幕的时候，系统会触发touch事件和click事件，touch事件优先处理，touch事件经过 捕获，处理, 冒泡 一系列流程处理完成后， 才回去触发click事件。
既然touch事件和click事件有了优先级别，那么能不能在touch阶段取消掉系统触发的click事件呢？当然是可以的，浏览器提供了这样的能力。在touch事件里面，调用e.preventDefault() 就可以阻止本次点击系统触发的click事件，即本次相关的click都不会执行。
targrt.addEventListener('touchstart', function(e) {
console.log(1);
e.preventDefault();
});
3) 点透现象
点透发生的条件****：
-
A 和 B不是后代继承关系(如果是后代继承关系的话，就直接是冒泡子类的话题了)
-
A发生touch， A touch后立即消失， B事件绑定click
-
A z-index大于B，即A显示在B浮层之上
点透发生的理由:
当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从文档树上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上面了。
解决办法：
targrt.addEventListener('touchend', function(e) {
e.preventDefault();
});
3．事件对象
TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。
每 个 Touch对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element描述。 TouchList 对象代表多个触点的一个列表.
1) TouchEvent
TouchEvent的属性继承了 UIEvent和 Event。
三个重要属性：
TouchEvent.changedTouches： 一个 TouchList 对象，包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch 对象。
TouchEvent.targetTouches： 一个 TouchList 对象，是包含了如下触点的 Touch 对象：触摸起始于当前事件的目标 element 上，并且仍然没有离开触摸平面的触点。
TouchEvent.touches： 一 个 TouchList 对象，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否发生了变化。
2) TouchList详解
只读属性：length返回这个TouchList中Touch对的个数。(就是有几个手指接触到了屏幕)
方法：item(index)返回TouchList中指定索引的Touch对象
3) Touch详解
image.png
触点相对于屏幕左边沿的的X坐标. 只读属性.
触点相对于屏幕上边沿的的Y坐标. 只读属性.
能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径. 这个值的单位和 screenX 相同. 只读属性.
能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和 screenY 相同. 只读属性.
它是这样一个角度值：由radiusX 和radiusY 描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面. 只读属性.
手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数. 只读属性.
4．tap类事件
触碰事件，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
注意:在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。如果你使用了触摸事件，可以调用 event.preventDefault()来阻止鼠标事件被触发。
一个正确的 tap 事件应当满足一下条件：
用户手指从屏幕移开时触发
不能在用户移动手指时触发（防止和滚动、拖拽事件的冲突）
多个手指同时触摸屏幕时不能触发
不应该触发 click 事件
5．swipe类事件
滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分
swipe：手指在屏幕上滑动时会触发
swipeLeft：手指在屏幕上向左滑动时会触发
swipeRight：手指在屏幕上向右滑动时会触发
swipeUp：手指在屏幕上向上滑动时会触发
swipeDown：手指在屏幕上向下滑动时会触发
二、 Zepto.js
Zepto.js 是一个轻量级的针对现代高级浏览器的JavaScript库， 它适配了jQuery的大部分api，也就是jQuery怎么用，Zepto.js就怎么用。它非常小，非常适合移动端。
Zepto.js的touch模块中封装了手势相关的代码。封装了再触摸设备上触发tap– 和 swipe– 相关事件，也适用于所有的touch(iOS, Android)和pointer事件(Windows Phone)。
触屏事件：tap、singleTap、doubleTap、longTap(>750ms）
滑动事件：swipe、swipeLeft,、swipeRight,、swipeUp,、swipeDown
<style>.delete { display: none; }</style>
<ul id=items>
<li>List item 1 <span class=delete>DELETE</span></li>
<li>List item 2 <span class=delete>DELETE</span></li>
</ul>
<script>
$('#items li').swipe(function(){
$('.delete').hide()
$('.delete', this).show()
})
$('.delete').tap(function(){
$(this).parent('li').remove()
})
</script>
三、 其他移动端js库
1．百度云touch.js
<u>https://github.com/Clouda-team/touchjs</u>
2．hammer.js
<u>https://github.com/hammerjs/hammer.js</u>
3．jquery mobile
<u>http://jquerymobile.com</u>
触点相对于屏幕左边沿的的X坐标. 只读属性.
触点相对于屏幕上边沿的的Y坐标. 只读属性.
能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径. 这个值的单位和 screenX 相同. 只读属性.
能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和 screenY 相同. 只读属性.
它是这样一个角度值：由radiusX 和radiusY 描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面. 只读属性.
手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数. 只读属性.
4．tap类事件
触碰事件，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
注意:在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。如果你使用了触摸事件，可以调用 event.preventDefault()来阻止鼠标事件被触发。
一个正确的 tap 事件应当满足一下条件：
用户手指从屏幕移开时触发
不能在用户移动手指时触发（防止和滚动、拖拽事件的冲突）
多个手指同时触摸屏幕时不能触发
不应该触发 click 事件
补充：
- taphold事件版本添加：1.0
描述：持续完成触摸事件后触发。
jQuery（“。selector”）。on（“taphold”，function（event）{...}）
jQuery Mobile taphold事件在持续，完整的触摸事件（也称为长按）之后触发。
$.event.special.tap.tapholdThreshold （默认值：750） - 此值指示用户在目标元素上触发taphold事件之前必须持有多长时间。
$.event.special.tap.emitTapOnTaphold （默认值：true） - 此值指示是否将与taphold事件一起发出点击事件。
这个插件扩展了jQuery的内置方法。如果未加载jQuery Mobile，则调用该.taphold()方法可能不会直接失败，因为该方法仍然存在。但是，不会发生预期的行为。
5．swipe类事件
滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分
swipe：手指在屏幕上滑动时会触发
swipeLeft：手指在屏幕上向左滑动时会触发
swipeRight：手指在屏幕上向右滑动时会触发
swipeUp：手指在屏幕上向上滑动时会触发
swipeDown：手指在屏幕上向下滑动时会触发
二、 Zepto.js
Zepto.js 是一个轻量级的针对现代高级浏览器的JavaScript库， 它适配了jQuery的大部分api，也就是jQuery怎么用，Zepto.js就怎么用。它非常小，非常适合移动端。
Zepto.js的touch模块中封装了手势相关的代码。封装了再触摸设备上触发tap– 和 swipe– 相关事件，也适用于所有的touch(iOS, Android)和pointer事件(Windows Phone)。
触屏事件：tap、singleTap、doubleTap、longTap(>750ms）
滑动事件：swipe、swipeLeft,、swipeRight,、swipeUp,、swipeDown
<style>.delete { display: none; }</style>
<ul id=items>
<li>List item 1 <span class=delete>DELETE</span></li>
<li>List item 2 <span class=delete>DELETE</span></li>
</ul>
<script>
$('#items li').swipe(function(){
$('.delete').hide()
$('.delete', this).show()
})
$('.delete').tap(function(){
$(this).parent('li').remove()
})
</script>
三、 其他移动端js库
1．百度云touch.js
<u>https://github.com/Clouda-team/touchjs</u>
2．hammer.js
<u>https://github.com/hammerjs/hammer.js</u>
网友评论