标签：
处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：
|
1
2
3
4
|
touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详 |
|
1
2
3
4
|
client / clientY：// 触摸点相对于浏览器窗口viewport的位置 pageX / pageY：// 触摸点相对于页面的位置 screenX /screenY：// 触摸点相对于屏幕的位置 identifier： // touch对象的unique ID |
http://blog.sina.com.cn/s/blog_65c2ec5e0101fexw.html
touchstart：触摸开始的时候触发
touchmove：手指在屏幕上滑动的时候触发
touchend：触摸结束的时候触发
而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：
touches：当前位于屏幕上的所有手指的列表。
targetTouches：位于当前DOM元素上手指的列表。
changedTouches：涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息（常用）：
identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）
target：DOM元素，是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。
radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持，好在功能不常用，欢迎大家反馈。
var obj = document.getElementByIdx_x(‘id‘);
obj.addEventListener(‘touchmove‘, function(event) {
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
event.preventDefault();// 阻止浏览器默认事件，重要
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX-50 + ‘px‘;
obj.style.top = touch.pageY-50 + ‘px‘;
}
}, false);
/*！*****************
使用示例：
var tempWrapId = document.getElementById(‘mMain‘);
//向左滑动的事件；
TouchEvent.touches(tempWrapId,‘swipeLeft‘,function(event){
if(oStop){
oStop = false;
i++;
if(i>(max-1)){
i = max-1;
oStop = true;
return false;
}
$(‘.m-main .m-item‘).find(‘.btn-slide‘).css(‘opacity‘,0);
$(‘#bodyWrap .m-main‘).animate({‘top‘:-(i*itemH)},400);
$(‘.m-main .m-item‘).eq(i).find(‘.btn-slide‘).css(‘opacity‘,1);
oStop = true;
}
});
var isTouch=(‘ontouchstart‘ in window);
if(isTouch){
$(".carousel").on(‘touchstart‘, function(e){
var that=$(this);
var touch = e.originalEvent.changedTouches[0];
var startX = touch.pageX;
var startY = touch.pageY;
$(document).on(‘touchmove‘,function(e){
touch = e.originalEvent.touches[0] ||e.originalEvent.changedTouches[0];
var endX=touch.pageX - startX;
var endY=touch.pageY - startY;
if(Math.abs(endY)<Math.abs(endX)){
if(endX > 10){
$(this).off(‘touchmove‘);
that.carousel(‘prev‘);
}else if (endX < -10){
$(this).off(‘touchmove‘);
that.carousel(‘next‘);
}
return false;
}
});
});
$(document).on(‘touchend‘,function(){
$(this).off(‘touchmove‘);
});
}
标签：
原文地址：http://www.cnblogs.com/qiuzhimutou/p/4778967.html
