js实现touch移动触屏滑动事件
投稿：hebedich
字体：[ ] 类型：转载 时间：
在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新的meego系统都模拟了类 似的对象）。这个对象封装一次屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以 通过touch event handler的event对象取到
移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。
以下是四种touch事件
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素
手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。
1.禁止缩放
通过meta元标签来设置。
2.禁止滚动
preventDefault是阻止默认行为，touch事件的默认行为就是滚动。
event.preventDefault();
使用案例：
&!DOCTYPE html&
&meta http-equiv="Content-Type" Content="text/ charset=utf-8;"&
&title&移动端触摸滑动&/title&
&meta name="author" content="rainna" /&
&meta name="keywords" content="rainna's js lib" /&
&meta name="description" content="移动端触摸滑动" /&
&meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no"&
*{margin:0;padding:0;}
li{list-style:}.m-slider{width:600margin:50px 20overflow:}
.m-slider .cnt{position:left:0;width:3000}
.m-slider .cnt li{float:width:600}
.m-slider .cnt img{display:width:100%;height:450}
.m-slider .cnt p{margin:20px 0;}
.m-slider .icons{text-align:color:#000;}
.m-slider .icons span{margin:0 5}
.m-slider .icons .curr{color:}
.f-anim{-webkit-transition:left .2}
&div class="m-slider"&
&ul class="cnt" id="slider"&
&img src="http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/9322175.jpg"&
&p&镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来&/p&
&img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/0310215.jpg"&
&p&锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。&/p&
&img src="http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/7481166.jpg"&
&p&水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的&/p&
&img src="http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/9949331.jpg"&
&p&海洋星球3重庆天气热得我想卧轨自杀&/p&
&img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/0310215.jpg"&
&p&以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分&/p&
&div class="icons" id="icons"&
&span class="curr"&1&/span&
&span&2&/span&
&span&3&/span&
&span&4&/span&
&span&5&/span&
var slider = {
//判断设备是否支持touch事件
touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
slider:document.getElementById('slider'),
index:0, //显示元素的索引
slider:this.slider, //this为slider对象
icons:document.getElementById('icons'),
icon:this.icons.getElementsByTagName('span'),
handleEvent:function(event){
var self = //this指events对象
if(event.type == 'touchstart'){
self.start(event);
}else if(event.type == 'touchmove'){
self.move(event);
}else if(event.type == 'touchend'){
self.end(event);
//滑动开始
start:function(event){
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值
isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
this.slider.addEventListener('touchmove',this,false);
this.slider.addEventListener('touchend',this,false);
move:function(event){
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if(event.targetTouches.length & 1 || event.scale && event.scale !== 1)
var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
isScrolling = Math.abs(endPos.x) & Math.abs(endPos.y) ? 1:0; //isScrolling为1时，表示纵向滑动，0为横向滑动
if(isScrolling === 0){
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
this.slider.className = 'cnt';
this.slider.style.left = -this.index*600 + endPos.x + 'px';
//滑动释放
end:function(event){
var duration = +new Date - startPos. //滑动的持续时间
if(isScrolling === 0){ //当为水平滚动时
this.icon[this.index].className = '';
if(Number(duration) & 10){
//判断是左移还是右移，当偏移量大于10时执行
if(endPos.x & 10){
if(this.index !== 0) this.index -= 1;
}else if(endPos.x & -10){
if(this.index !== this.icon.length-1) this.index += 1;
this.icon[this.index].className = 'curr';
this.slider.className = 'cnt f-anim';
this.slider.style.left = -this.index*600 + 'px';
//解绑事件
this.slider.removeEventListener('touchmove',this,false);
this.slider.removeEventListener('touchend',this,false);
init:function(){
var self = //this指slider对象
if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false); //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性
slider.init();
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具如何修复移动浏览器上 touchend 事件不触发的bug_百度知道
如何修复移动浏览器上 touchend 事件不触发的bug
我有更好的答案
你听说uc浏览器有安全漏洞了吗，好多用户都因此不用啦，uc浏览器所有的功能都存在强大的安全漏洞，经常泄漏用户的一些隐私，如果不行就卸载了重新安装或者是刷机解决；你可以用电脑管家修复你好
这个可以用管家的修复漏洞功能修复，要说不行就出现安装，你还可以选择个别的浏览器， 我现在用的QQ浏览器没有出现这样的情况。QQ浏览器在技术架构上做了创新性的探索，冷启动速度在实验室环境下达到了0.3秒，UI和功能的响应速度也追求零延迟。速度是真的快。
你好；你重装一下浏览器就可以了，这个浏览器不错，不像我之前使用的uc浏览器，它的软件漏洞很大，很多常用的功能都没有了，有的视频网站都不支持，我早就卸载不用了，
其他类似问题
为您推荐：
浏览器的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁如何修复移动浏览器上 touchend 事件不触发的bug_百度知道
如何修复移动浏览器上 touchend 事件不触发的bug
提问者采纳
哦，我先说一下我的是QQ浏览器这个我是使用的有些年头了，他们会给您解决的啦什么浏览器都是有他的bug的啦，现在你只能看到成熟的它了，很好使用了你好，不过我使用的浏览器就是比较少点吧虽然每隔一段时间就会升级，你要是把你的漏洞的报告发送到你的这个浏览器的官方就可以了，你的浏览器的bug不是你能修复的啦。当年的稚气已经退去
其他类似问题
为您推荐：
浏览器的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁换一换猜你喜欢用心创造滤镜
扫码下载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
阅读(2754)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
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}}