一个模拟手机手指滑动事件的jquery插件_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
一个模拟手机手指滑动事件的jquery插件
&&一个模拟手机手指滑动事件的jquery插件
你可能喜欢温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
精通JAVA语言,C语言,Android开发,,HTTP,Socket通信和Webservices的开发。熟悉IOS开发,cocos2d-x,C++,熟悉PhoneGap和mobl和jquery mobile开发移动web app。有良好的开发经验和项目实战。挑战生活,乐观人生,积极进取。
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(11894)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'safari里的touch事件解析--touchstart,touchmove,touchend,touchcancel',
blogAbstract:'safari里的touch事件包括touchstart,touchmove,touchend,touchcancel这四个事件， 其实熟悉鼠标事件的话就知道鼠标有mouseup，mousedown，mouseover，mouseout，mousemove这几个相关的事件，如果你做过鼠标的拖拽功能的话，就知道会涉及到鼠标的mouseover ,mousemove,mouseout这三个事件，那么这里相同的在safari的touch事件里基本就是对应的鼠标的这三个操作，只是不同的，iPhone等触屏界面中没有鼠标的呈现，但是基本原理是相当的。safari里会涉及一个手指one-finger操作，这里就会涉及touchst',
blogTag:'html5,webapps',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:6,
permalink:'blog/static/',
commentCount:1,
mainCommentCount:1,
recommendCount:2,
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:'精通JAVA语言,C语言,Android开发,,HTTP,Socket通信和Webservices的开发。熟悉IOS开发,cocos2d-x,C++,熟悉PhoneGap和mobl和jquery mobile开发移动web app。有良好的开发经验和项目实战。挑战生活,乐观人生,积极进取。',
hmcon:'0',
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事件会穿透页面，电脑上chrome模拟不会有，但手机上实际操作会出现 - 简书
touch事件会穿透页面，电脑上chrome模拟不会有，但手机上实际操作会出现
首先~：下面层是a标签(一定要慎用)的还是会穿透，但是div等这些便签的居然不会穿透了...穿透（点穿）是在mobile各种浏览器上发生的常见的bug。可能是由click事件的延迟或者事件冒泡导致。移动web开发常用的Zepto库中的touch和tap事件就会有点穿的bug（Zepto的事件都绑在Document上）。常用的解决方案如下：1 使用，这个可以非常完美的解决点穿问题。2 在touchend事件回调中加入preventDefault, 并在下一层中加上pointer-events:none。移动端的click都是touch之后，才会模拟触发。触发的顺序是touchstarttouchmovetouchendmousedownmousemovemouseenterclick在重叠的区域里，被遮盖的元素绑定click，遮盖的元素绑定touch事件，且touch后遮盖的元素会隐藏的话，就会造成穿透，因为click是在touch之后延迟触发的，浏览器会误认为是在遮盖的元素上触发了click。最好的解决方案是 自己通过touchstart，touchmove，touchend，来模拟一个click（tap）事件，这样除了防止穿透外，事件响应速度也会提高。jquery（8）
项目中遇到touch事件影响click事件的问题，输入密码后（错误的密码），点击确认支付，马上就触发了忘记密码按钮了，这显然不是我们想要的。我们想要的是用户输错密码后，用户点击忘记密码才触发事件。往下看。
什么是touchstart事件？
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
顺带说一下与touchstart比较相似的事件：
touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend事件：当手指从屏幕上离开的时候触发。
下面入正题：
一个button绑定touchstart事件，点击此button后使用onclick连带触发，此处连带触发的意思是使用attr函数给某元素添加onclick事件时这个onclick事件马上就被触发了，而不是到用户点击这个元素才触发。
此处为什么使用touchstart事件而不用click事件呢？因为移动端touchstart比click触发的要快，用户体验好。
$(&#qezfBtn&).live(&touchstart&,function(){
&&&&&&&&submitPay();
function&submitPay(){
& & &$(&#btn2&).attr(&onclick&,&openUrl('url')&);
function&openUrl(url){
&&&&window.location.href=
id为qezfBtn的元素绑定了touchstart事件，当手指触摸屏幕时候触发submitPay()事件；触发submitPay时为id为btn2的函数添加onclick，添加完了之后马上就触发onclick事件了，即openUrl方法马上就被调用了。这不是我们想要的效果，我们想要的是用户点击完id为btn2的元素后才触发onclick事件，才调用openUrl方法。
涉及一个时间流的概念，点击事件可以分解成多个事件。
在移动端，手指点击一个元素，会经过：touchstart --& touchmove
-& touchend --&click。
事件流本身会持续进行下去的。
touchstart&触发之后，click事件还被触发了，onclick属性也被触发了。
做了个小测试：
&!DOCTYPE&HTML&
&&&&&script&type=&text/javascript&&src=&js/jquery-1.8.3.min.js&&&/script&
&&&script&type=&text/javascript&&
&&&&$('#buttonn').live(&click&,function(){
&&&&&&&&alert(&click&);
&&&&$('#buttonn').live(&touchend&,function(){
&&&&&&&&alert(&touchend&);
&&&/script&
&&&&&button&id=&buttonn&&测试touch影响click事件&/button&
点击button后会先弹出touchend，接着会弹出click。说明了点击事件可以分解成多个事件。
那能不能只触发touchend，不触发click呢？答案是可以的，阻止事件的默认行为，使用preventDefault()
&&&&$('#buttonn').live(&click&,function(){
&&&&&&&&alert(&click&);
&&&&$('#buttonn').live(&touchend&,function(e){
& & & &&e.preventDefault();
&&&&&&&&alert(&touchend&);
解决方案，本人想到的有两个：
1、阻止事件的默认行为
$(&#qezfBtn&).live(&touchstart&,function(e){
& & & &&e.preventDefault();
&&&&&&&&submitPay();
2、不要使用事件流中两个事件，此处事件流为touchstart --& touchmove -& touchend --&click。前面用了touchstart&，后面不使用click事件即可，可以换成ontouchstart或者ontouchend
submitPay方法换成以下这样：
function&submitPay(){
& & &$(&#btn2&).attr(&ontouchstart&,&openUrl('url')&);
& & 或者&&$(&#btn2&).attr(&ontouchend&,&openUrl('url')&);
参考资料：/articles/3QZ7jeV
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：70551次
积分：1465
积分：1465
排名：千里之外
原创：64篇
转载：62篇
(4)(1)(1)(3)(2)(3)(2)(4)(15)(7)(6)(1)(8)(4)(1)(4)(8)(3)(4)(1)(11)(2)(1)(5)(21)(7)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。
一开始触摸事件touchstart、touchmove和touchend是iOs版Safari为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。
在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend事件：当手指从屏幕上离开的时候触发。
touchcancel事件：当停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。
上面的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。
touches：表示当前跟踪的触摸操作的touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含的属性如下。
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触目的DOM节点目标。
上面的属性光这么看，果然非常繁琐，每个属性说的都是那么的细致，只有真刀实枪的来点小例子才能更加明白其中的奥妙。所以小例子如下。
Script代码
function load (){
&&&&document.addEventListener('touchstart',touch,false);
&&&&document.addEventListener('touchmove',touch,false);
&&&&document.addEventListener('touchend',touch,false);
&&&&function touch (event){
&&&&&&&&var event = event || window.
&&&&&&&&var oInp = document.getElementById(&inp&);
&&&&&&&&switch(event.type){
&&&&&&&&&&&&case&&touchstart&:
&&&&&&&&&&&&&&&&oInp.innerHTML =&Touch started (&&+ event.touches[0].clientX +&,&&+ event.touches[0].clientY +&)&;
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&&touchend&:
&&&&&&&&&&&&&&&&oInp.innerHTML =&&br&Touch end (&&+ event.changedTouches[0].clientX +&,&&+ event.changedTouches[0].clientY +&)&;
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&&touchmove&:
&&&&&&&&&&&&&&&&event.preventDefault();
&&&&&&&&&&&&&&&&oInp.innerHTML =&&br&Touch moved (&&+ event.touches[0].clientX +&,&&+ event.touches[0].clientY +&)&;
&&&&&&&&&&&&&&&&
window.addEventListener('load',load,false);
&div id=&inp&&&/div&
上面的小例子。当touchstart事件触发的时候，会将触摸的位置更新到div标签中。当touchmove事件触发的时候，会默认行为的滚动(触摸移动的默认行为是滚动页面)，然后触摸操作的变化信息更新到div标签中。而touchend事件会输出有关触摸操作的最终信息。注意，在touchend事件触发的时候，touches集合中就没有任何Touch对象了，因为不存在活动的触摸操作。
这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素，这些事件(包括鼠标事件)发生的顺序如下：
(1)touchstart
(3)mousemove(一次)
(4)mousedown
(5)mouseup
(7)touchend
介绍了这么多，这些触摸事件的兼容情况怎么样呢?支持触摸事件(touchstart、touchmove和touchend)的浏览器有：iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6+ 和Chrome也支持触摸事件。
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)就为大家介绍到这里了，今天主要为大家介绍了些浏览器兼容支持的情况还不错的触摸事件。日后若有兼容不错的事件，再继续介绍。更多有关HTML5实战与剖析的相关知识，敬请关注梦龙小站的相关更新。​}