移动端触摸事件_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
移动端触摸事件
&&移动端的触摸事件
你可能喜欢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);
&p id=&inp&&&/p&
上面的小例子。当touchstart事件触发的时候，会将触摸的位置更新到p标签中。当touchmove事件触发的时候，会默认行为的滚动(触摸移动的默认行为是滚动页面)，然后触摸操作的变化信息更新到p标签中。而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实战与剖析的相关知识，敬请关注梦龙小站的相关更新。​2013年8月 .NET技术大版内专家分月排行榜第三2011年10月 .NET技术大版内专家分月排行榜第三
2013年 总版技术专家分年内排行榜第一
2014年 总版技术专家分年内排行榜第三
2013年8月 .NET技术大版内专家分月排行榜第三2011年10月 .NET技术大版内专家分月排行榜第三
2013年8月 .NET技术大版内专家分月排行榜第三2011年10月 .NET技术大版内专家分月排行榜第三
2013年8月 .NET技术大版内专家分月排行榜第三2011年10月 .NET技术大版内专家分月排行榜第三
2013年8月 .NET技术大版内专家分月排行榜第三2011年10月 .NET技术大版内专家分月排行榜第三
2013年8月 .NET技术大版内专家分月排行榜第三2011年10月 .NET技术大版内专家分月排行榜第三
2013年8月 .NET技术大版内专家分月排行榜第三2011年10月 .NET技术大版内专家分月排行榜第三
2013年8月 .NET技术大版内专家分月排行榜第三2011年10月 .NET技术大版内专家分月排行榜第三
2013年8月 .NET技术大版内专家分月排行榜第三2011年10月 .NET技术大版内专家分月排行榜第三
2013年8月 .NET技术大版内专家分月排行榜第三2011年10月 .NET技术大版内专家分月排行榜第三
2013年8月 .NET技术大版内专家分月排行榜第三2011年10月 .NET技术大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
用JavaScript写了很多mousedown、mousemove、mouseup的事件方法，在PC端上可以通过鼠标来实现（例如：缩放、拖动），但是在移动端用手指操作没反应，有什么方法可以使在移动端触发touchstart时变成执行PC端的mousedown， 触发touchmove时变成执行PC端的mousemove， 触发touchend时变成执行PC端的mouseup？
或者有这方面的框架吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
简单的移动端触屏事件，zepto.js，复杂的话，看看这个
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：}