二次元同好交流新大陆
扫码下载App
汇聚2000万达人的兴趣社区下载即送20张免费照片冲印
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
移动端单次触摸事件，直接绑定touchend事件即可，所有的手机事件都要阻止默认动作，ev.preventDefault( ).在移动端，牵扯到一个事件流的概念，点击事件可以分解成多个事件，手指点击一个元素，会经过：touchstart --& touchmove -& touchend --》click。&推荐阅读：/articles/3QZ7jeV上周做了一个项目，发现一个DOM元素触发touch事件，竟然还会触发别的元素的click事件。我先描述一下，当时遇到的问题。项目初始状态是下面这张图：我给右上方的的搜索按钮，绑定了一个touchstart事件，点击以后出现一个搜索框。至于为什么不直接绑定click事件，是因为touch事件响应更快，交互上更加流畅。这个搜索框右边的搜索按钮，绑定了一个click事件，点击后立即触发搜索。当给这两个DOM元素，都绑定好事件以后。我们分别用android和iphone手机进行测试，得到了一个共同的结果。当手指接触到搜索图标，立即触发了该元素的touchstart事件，下面的搜索框也随之显示。还没有完，这时候手指还会触发搜索按钮的click事件，导致搜索框提交。整个交互变成了，点击搜索图标，就触发了搜索。这肯定不是我们想要的。然后就查一些资料，得到了一些理论知识。最重要的一个就是事件流的概念，点击事件可以分解成多个事件。在移动端，手指点击一个元素，会经过：touchstart --& touchmove -& touchend --》click。事件流本身会持续进行下去的。做了几个demo验证了一下，上面的理论。首先给一个元素同时绑定touchstart和click事件，看谁先触发。html：&style&
height:500
background:#F00;
&div class="content"&&/div&var content = document.querySelector(".content");
content.addEventListener("touchend", function(){
content.style.background = "#0F0";
});content.addEventListener("click", function(){
content.style.background = "#00F";
});上面逻辑是给content类名的div，绑定一个touch事件和一个click事件。分别让div的背景色变成绿色和蓝色。手机测试一下，点击一下，div是先变成绿色然后又变成蓝色。那能不能只触发touch事件，不去触发click事件呢？查阅相关资料，&发现了preventDefault()的方法，阻止事件的默认行为。var content = document.querySelector(".content");
content.addEventListener("touchstart", function(e){
e.preventDefault();
content.style.background = "#0F0";
content.addEventListener("click", function(e){
content.style.background = "#00F";
});通过&preventDefault()方法，可以阻止后面事件的触发。谷歌测试方法：（如图所示）例如，在一个touchend事件中，这就会是移开的手指。这些列表由包含了触摸信息的对象组成：1.&identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。2.&target：DOM元素，是动作所针对的目标。3.&客户/页面/屏幕坐标：动作在屏幕上发生的位置。4.&半径坐标和 rotationAngle：画出大约相当于手指形状的椭圆形。可触控应用touchstart、touchmove和touchend事件提供了一组足够丰富的功能来支持几乎是任何类型的基于触摸的交互——其中包括常见的多点触摸手势，比如说捏缩放、旋转等待。下面的这段代码让你使用单指触摸来四处拖曳一个DOM元素：var obj = document.getElementById('id');obj.addEventListener('touchmove', function(event) {// 如果这个元素的位置内只有一个手指的话if (event.targetTouches.length == 1) {var touch = event.targetTouches[0];// 把元素放在手指所在的位置obj.style.left = touch.pageX + 'px';obj.style.top = touch.pageY + 'px';}}, false);下面是一个示例，该例子显示了屏幕上当前所有的触点，它的作用就是用来感受一下设备的响应性。阻止缩放缺省的多点触摸设置不是特别的好用，因为你的滑动和手势往往与浏览器的行为有关联，比如说滚动和缩放。要禁用缩放功能的话，使用下面的元标记设置你的视图区（viewport），这样其对于用户来说就是不可伸缩的了：content="width=device-width, initial-scale=1.0, user-scalable=no"&阻止滚动一些移动设备有缺省的touchmove行为，比如说经典的iOS overscroll效果，当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱，但要禁用它很容易。document.body.addEventListener('touchmove', function(event) {event.preventDefault();}, false);细心渲染如果你正在编写的多点触控应用涉及了复杂的多指手势的话，要小心地考虑如何响应触摸事件，因为一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出所有触点的例子，你可以在有触摸输入的时候就立刻进行绘制：canvas.addEventListener('touchmove', function(event) {renderTouches(event.touches);},不过这一技术并不是要随着屏幕上的手指个数的增多而扩充，替代做法是，可以跟踪所有的手指，然后在一个循环中做渲染，这样可获得更好的性能：var touches = []canvas.addEventListener('touchmove', function(event) {touches = event.}, false);// 设置一个每秒60帧的定时器timer = setInterval(function() {renderTouches(touches);}, 15);提示：setInterval不太适合于动画，因为它没有考虑 到浏览器自己的渲染循环。现代的桌面浏览器提供了requestAnimationFrame这一函数，基于性能和电池工作时间原因，这是一个更好的选 择。一但浏览器提供了对该函数的支持，那将是首选的处理事情的方式。使用targetTouches和changedTouches要记住的一点是，event.touches是与屏幕接触的所有手指的一个数组，而不仅是位于目标DOM元素上的那些。你可能会发现使用 event.targetTouches和event.changedTouches来代替event.touches更有用一些。最后一点，因为你是在为移动设备做开发，因此你应该要留心移动的最佳做法，这些在中有论及，以及要了解。设备支持遗憾的是，触摸事件的实现在完备性和质量方面的差别很大。我编写了一个诊断脚本来显示一些关于触摸API实现的基本信息，其中包括哪些事件是支持的，以及 touchmove事件触发的解决方案。我在Nexus One和Nexus S硬件上测试了Android 2.3.3，在Xoom上测试了Android 3.0.1，以及在iPad和iPhone上测试了iOS 4.2。简而言之，所有被测试的浏览器都支持touchstart、touchend和touchmove事件。规范提供了额外的三个触摸事件，但被测试的浏览器没有支持它们：1.&touchenter：移动的手指进入一个DOM元素。2.&toucheleave：移动手指离开一个DOM元素。3.&touchcancel：触摸被中断（实现规范）。被测试的浏览器还在每个触摸列表内部都提供了touches、targetTouches和changedTouches列表。不过，被测试的浏 览器没有支持 radiusX、radiusY或是rotationAngle属性，这些属性指明触摸屏幕的手指的形状。在一次touchmove期间，事件大约一秒钟 触发60次，所有的被测试设备都是这样。Android 2.3.3 (Nexus)Android的Gingerbread浏览器（在Nexus One和Nexus S上测试）不支持多点触摸，这是一个。Android 3.0.1 (Xoom)Xoom的浏览器对多点触摸有一个基本的支持，不过只能是在单个的DOM元素上起作用。浏览器不能正确响应同时发生在不同DOM元素上的两处触摸，换句话说，下面的代码会对两个同时发生的触摸的给出反应：obj1.addEventListener('touchmove', function(event) {for (var i = 0; i & event.targetT i++) {var touch = event.targetTouches[i];console.log('touched ' + touch.identifier);}}, false);但下面的代码则不会：var objs = [obj1, obj2];for (var i = 0; i & objs. i++) {var obj = objs[i];obj.addEventListener('touchmove', function(event) {if (event.targetTouches.length == 1) {console.log('touched ' + event.targetTouches[0].identifier);}}, false);}iOS 4.x (iPad, iPhone)iOS设备完全支持多点触摸，能够跟踪多个手指，并在浏览器中提供一个非常敏感的触摸体验。开发者工具在移动开发中，一种较为容易的做法是，先在桌面上开始原型设计，然后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在PC上进行测试的那些功能之一，因为大部分的PC都没有触摸输入。不得不在移动设备上进行的测试有可能会拉长你的开发周期，因为你所做的每项改变都需要提交代码到服务器上，接着再加载到设备上。然后，一旦运行后，对应用也就没有太多的调试了，因为平板电脑和智能手机都很缺乏web开发者所用的工具。这个问题的一个解决方案是在开发机器上模拟触发事件。对于单点触摸，触摸事件可以基于鼠标事件来模拟。如果你有触摸输入设备的话，比如说现代的App MacBook，那么多点触摸也可以被模拟。单点触摸事件如果你想在桌面上模拟单点触摸事件的话，试一下，该程序在网页上模拟触摸事件并提供一只巨手来引导。另外还有这一jQuery插件，该插件跨平台地统一了触摸和鼠标事件。多点触摸事件为了能够让你的多点触摸web应用在你的浏览器或是多点触摸控板（比如说Apple MacBook或是MagicPad）上起作用，我创建了这一个，其捕捉来自触控板的触摸事件，然后把它们转换成标准兼容的触摸事件。1. 下载并把它安装到~/Library/Internet Plug-Ins/目录下。2. 下载这一Mac MagicPad的并启动这一服务器。3. 下载这一javascript库来基于npTuioClient回调模拟规范兼容的触摸事件。4. 以如下方式把magictouch.js脚本和npTuioClient插件包含到你的应用中：& head&...& script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js"&& /script&& /head&& body&...& object id="tuio" type="application/x-tuio" style="width: 0 height: 0"&Touch input plugin failed to load!& /object&& /body&我只在Chrome 10上测试了这一方法，不过只要稍做调整它应该能够在其他的现代浏览器上工作。如果你的计算机没有多点触摸输入的话，你可以使用其他的TUIO跟踪器，比如说来模拟触摸事件。欲了解更多信息，请参阅。需要注意的一点是，你的手势可以是和OS层面的多点触摸手势相同的。在OS X上，你可以通过进入System Preferences中的Trackpad偏好设定版面来配置系统范围的事件。随着多点触摸功能逐渐得到跨移动浏览器的的广泛支持，我非常高兴地看到新的web应用充分利用了这一丰富的API。&Touch事件与Mouse事件的出发关系在触屏操作后，手指提起的一刹那（即发生ontouchend后），系统会判断接收到事件的element的内容是否被改变，如果内容被改变，接下来的事件都不会触发，如果没有改变，会按照mousedown，mouseup，click的顺序触发事件。特别需要提到的是，只有再触发一个触屏事件时，才会触发上一个事件的mouseout事件。gesture事件Gesture事件，包括手指点击（click），轻拂（flick），双击（double-click），手指的分开、闭合（scale）、转动（rotate）等一切手指能在屏幕上做的事情，它只在有两根或多根手指放在屏幕上的时候触发，事件处理函数中会得到一个GestureEvent类型的参数，它包含了手指的scale（两根移动过程中分开的比例）信息和rotation（两根手指间连线转动的角度）信息。这个事件是对touch事件的更高层的封装，和touch一样，它同样包括gesturestart，gesturechange，gestureend。gesture事件触发过程：Step 1、第一根手指放下，触发touchstartStep 2、第二根手指放下，触发gesturestartStep 3、触发第二根手指的touchstartStep 4、立即触发gesturechangeStep 5、手指移动，持续触发gesturechange，就像鼠标在屏幕上移动的时候不停触发mousemove一样Step 6、第二根手指提起，触发gestureend，以后将不会再触发gesturechangeStep 7、触发第二根手指的touchendStep 8、触发touchstart！注意，多根手指在屏幕上，提起一根，会刷新一次全局touch！重新触发第一根手指的touchstartStep 9、提起第一根手指，触发touchend
阅读(4650)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'移动端touch事件影响click事件的相关解决方法',
blogAbstract:'在移动端选取元素推荐使用：document.querySelector(\'#box\'), &document.querySelector(\'#box li\')[ 0 ];移动端单次触摸事件，直接绑定touchend事件即可，所有的手机事件都要阻止默认动作，ev.preventDefault( ).在移动端，牵扯到一个事件流的概念，点击事件可以分解成多个事件，手指点击一个元素，会经过：touchstart --& touchmove -& touchend --》click。&推荐阅读：/articles/3QZ7jeV',
blogTag:'',
blogUrl:'blog/static/3',
isPublished:1,
istop:false,
modifyTime:1,
publishTime:1,
permalink:'blog/static/3',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页，用到了触屏滑动的特效，就是往右滑动的时候左侧隐藏的菜单从左边划出来。
做完之后在手机原生浏览器中运行正常，但在QQ和微信中打开，发现touchmove只会触发一次，而且touchend也经常不触发。
之后百度了一下这个问题，原因是
主要是由于200ms超时导致内核不一定会一直处理touchmove事件，一旦超时会将后续所有的事件转交给UI处理，导致touchmove不会一直触发。
为了解决开发者需要，建议开发者在touchstart时调用event.preventDefault，这样就可以保证内核会一起触发touchmove事件了。
根据上面所说，在touchstart中添加了event.preventDefault()方法，在QQ和微信中果然正常了。
但是！！！页面中的超链接点击没反应了！！！给其他地方加的click事件也不触发了！！！
之后继续百度，得知当在移动端上点击屏幕时，会依次触发touchstart,touchmove,touchend,click事件。
之后测试了一下，发现正确的触发过程应该是：touchstart→touchmove→touchend或者touchstart→touchend→click。
如果在点击屏幕的时候手指滑动的话，是不会触发click事件的。
参考地址：
上面说event.preventDefault()的方法，会阻止事件的默认行为。可以通过调用preventDefault()方法，可以阻止后面事件的触发。
我知道event.preventDefault()会阻止a标签默认的动作(跳转到href指定的页面)，但是为什么click也不触发了呢？
之后我大胆推测了一下：
会不会是因为在移动端click事件的触发条件就是必须touchstart和touchend同时触发才能触发click呢？
我在touchstart中调用了event.preventDefault方法，是不是让浏览器误以为没有触发touchstart事件，只触发了touchend事件，所以没有触发click事件呢？
之后我删除了touchstart中的event.preventDefault方法，果然超链接和click事件都触发了，但是前面说的问题又出现了，在QQ和微信中touchmove和touchend又出问题了。
怎么办呢？
后来突然脑袋灵光一闪，既然在touchstart中加了event.preventDefault会导致不触发click事件，那我在touchmove中加可以吧？
抱着试一试的心态，果然好了，click能顺利触发，QQ和微信中也没有问题，我以为这样就好了，但是为什么页面不能滚动了？
原来touchmove中添加event.preventDefault方法之后会阻止浏览器默认的滚动。。。
所以页面无法滚动了，之后又去找找找，找了很久一直没找到怎么解决这个问题，突然想起之后用的一个移动端的图片轮播插件，
为什么他们可以左右滑动，不影响click事件和a标签，也不影响页面的滚动。
然后我打开了这个插件的源码，终于在touchmove中找到了答案
在touchmove中有这样一段代码(下面是我自己抄过来简化过的)：
javascript 代码
var w = x&0?x*-1:x;
//x轴的滑动值
var h = y&0?y*-1:y;
//y轴的滑动值
//如果是在x轴中滑动
event.preventDefault();
就是在touchmove中判断x轴和y轴的移动值，判断当前是往哪个方向滑动，如果是在x轴上滑动（左右），就调用event.preventDefault()方法，如果是在y轴上滑动（上下），就不调用event.preventDefault()。
然后测试一下，QQ和微信中特效没有问题，click事件和a标签链接也可以顺利触发，页面滚动也没有问题。
所有问题终于解决了。。
总结一下：
在QQ和微信（当然还包括其他浏览器，不过我没测试过）中如果有需要用到touch事件做的特效一定要在touchstart或者touchmove中添加event.preventDefault()方法。
在touchstart中如果有event.preventDefault()方法， 将不会触发click事件和a标签方法。在这里可以使用tap代替click，但是a标签的话就不太方便了。
如果在touchmove中有event.preventDefault()方法，最好加上方向判断，当然如果你页面内容不需要滚动条就不需要加判断了。
如果页面需要横向和纵向都滚动怎么办
刚刚接触移动端，发现微信上会有好多莫名其妙的问题。看你的文章发现自己解决问题的能力不行
1 总笔记数
1122 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：javascript移动设备web开发中对touch事件的封装实例
在触屏设备上，一些比较基础地手势都需要通过对 touch 事件进行二次封装才能实现.
zepto 是移动端上使用率比较高地一个类库，但是其 touch 模块模拟出来地一些事件存在一些兼容性问题，如 tap 事件在某些安卓设备上存在事件穿透地 bug，其他类型地事件也或多或少地存在一些兼容性问题.
于是乎，干脆自己动手对这些常用地手势事件进行了封装，由于没有太多真实地设备来进行测试，可能存在一些兼容性问题，下面地代码也只是在 ios 7、andorid 4 上地一些比较常见地浏览器中测试通过.
tap 事件相当于 pc 浏览器中地 click 效果，虽然在触屏设备上 click 事件仍然可用，但是在很多设备上，click 会存在一些延迟，如果想要快速响应地 &click& 事件，需要借助 touch 事件来实现.
var starttx,
element.addeventlistener( 'touchstart', function( e ){
& var touches = e.touches[0];
& starttx = touches.
& startty = touches.
}, false );
element.addeventlistener( 'touchend', function( e ){
& var touches = e.changedtouches[0],
&&& endtx = touches.clientx,
&&& endty = touches.
& // 在部分设备上 touch 事件比较灵敏，导致按下和松开手指时地事件坐标会出现一点点变化
& if( math.abs(starttx - endtx) & 6 && math.abs(startty - endty) & 6 ){
&&& console.log( 'fire tap event' );
}, false );
doubletap事件
doubletap 事件是当手指在相同位置范围内和极短地时间内两次敲击屏幕时触发地事件.在部分浏览器下，doubletap 事件会选中文本，如果不希望选中文本，可以给元素添加 user-select:none 地 css 属性.
var istouchend = false,
& lasttime = 0,
& lasttx = null,
& lastty = null,
& firsttouchend = true,
& body = document.body,
& dtaptimer, starttx, startty,
element.addeventlistener( 'touchstart', function( e ){
& if( dtaptimer ){
&&& cleartimeout( dtaptimer );
&&& dtaptimer =
& var touches = e.touches[0];
& starttx = touches.
& startty = touches.&&
}, false );
element.addeventlistener( 'touchend', function( e ){
& var touches = e.changedtouches[0],
&&& endtx = touches.clientx,
&&& endty = touches.clienty,
&&& now = date.now(),
&&& duration = now -
& // 首先要确保能触发单次地 tap 事件
& if( math.abs(starttx - endtx) & 6 && math.abs(starttx - endtx) & 6 ){
&&& // 两次 tap 地间隔确保在 500 毫秒以内
&&& if( duration & 301 ){
&&&&& // 本次地 tap 位置和上一次地 tap 地位置允许一定范围内地误差
&&&&& if( lasttx !== null &&
&&&&&&& math.abs(lasttx - endtx) & 45 &&
&&&&&&& math.abs(lastty - endty) & 45 ){
&&&&&&& firsttouchend =
&&&&&&& lasttx = lastty =
&&&&&&& console.log( 'fire double tap event' );
&&&&& lasttx =
&&&&& lastty =
&&& firsttouchend =
&&& lasttx = lastty =
& lasttime =
}, false );
// 在 ios 地 safari 上手指敲击屏幕地速度过快，
// 有一定地几率会导致第二次不会响应 touchstart 和 touchend 事件
// 同时手指长时间地touch不会触发click
if( ~navigator.useragent.tolowercase().indexof('iphone os') ){
& body.addeventlistener( 'touchstart', function( e ){
&&&&& starttime = date.now();
& }, true );
& body.addeventlistener( 'touchend', function( e ){
&&&&& var nolongtap = date.now() - starttime & 501;
&&&&& if( firsttouchend ){
&&&&&&&&& firsttouchend =
&&&&&&&&& if( nolongtap && e.target === element ){
&&&&&&&&&&&&& dtaptimer = settimeout(function(){
&&&&&&&&&&&&&&&&& firsttouchend =
&&&&&&&&&&&&&&&&& lasttx = lastty =
&&&&&&&&&&&&&&&&& console.log( 'fire double tap event' );
&&&&&&&&&&&&& }, 400 );
&&&&&&&&& }
&&&&& else{
&&&&&&&&& firsttouchend =
& }, true );
// ios 上手指多次敲击屏幕时地速度过快不会触发 click 事件
element.addeventlistener( 'click', function( e ){
& if( dtaptimer ){
&&& cleartimeout( dtaptimer );
&&& dtaptimer =
&&& firsttouchend =
}, false );
longtap事件
longtap 事件是当手指长时间按住屏幕保持不动时触发地事件.
var starttx, startty,
element.addeventlistener( 'touchstart', function( e ){
& if( ltaptimer ){
&&& cleartimeout( ltaptimer );
&&& ltaptimer =
& var touches = e.touches[0];
& starttx = touches.
& startty = touches.
& ltaptimer = settimeout(function(){
&&& console.log( 'fire long tap event' );
& }, 1000 );
& e.preventdefault();
}, false );
element.addeventlistener( 'touchmove', function( e ){
& var touches = e.touches[0],
&&& endtx = touches.clientx,
&&& endty = touches.
& if( ltaptimer && (math.abs(endtx - starttx) & 5 || math.abs(endty - startty) & 5) ){
&&& cleartimeout( ltaptimer );
&&& ltaptimer =
}, false );
element.addeventlistener( 'touchend', function( e ){
& if( ltaptimer ){
&&& cleartimeout( ltaptimer );
&&& ltaptimer =
}, false );
swipe 事件是当手指在屏幕上滑动后触发地事件，根据手指滑动地方向又分为 swipeleft (向左)、swiperight (向右)、swipeup (向上)、swipedown (向下).
var istouchmove, starttx,
element.addeventlistener( 'touchstart', function( e ){
& var touches = e.touches[0];
& starttx = touches.
& startty = touches.
& istouchmove =
}, false );
element.addeventlistener( 'touchmove', function( e ){
& istouchmove =
& e.preventdefault();
}, false );
element.addeventlistener( 'touchend', function( e ){
& if( !istouchmove ){
& var touches = e.changedtouches[0],
&&& endtx = touches.clientx,
&&& endty = touches.clienty,
&&& distancex = starttx - endtx
&&& distancey = startty - endty,
&&& isswipe =
& if( math.abs(distancex) &= math.abs(distancey) ){
&&& if( distancex & 20 ){
&&&&& console.log( 'fire swipe left event' );
&&&&& isswipe =
&&& else if( distancex & -20 ){
&&&&& console.log( 'fire swipe right event' );&&&
&&&&& isswipe =
&&& if( distancey & 20 ){
&&&&& console.log( 'fire swipe up event' );&&&&&&&
&&&&& isswipe =
&&& else if( distancey & -20 ){
&&&&& console.log( 'fire swipe down event' );&&&&&&&&
&&&&& isswipe =
& if( isswipe ){
&&& console.log( 'fire swipe event' );
}, false );
上面模拟地事件都封装在 monoevent 中了.完整代码地址：/chenmnkken/monoevent，需要地朋友看看吧~
： 更多热点信息信息请查看：