Apr 3, 2014 - 
javascript, 前端 
No Comments
javascript, 前端 No Comments 对于移动端浏览器touch事件的研究总结（1）
最基本的4种触摸事件：
- touchstart : 手指触摸屏幕时触发
- touchmove : 手指在屏幕上滑动时触发
- touchend : 手指离开屏幕时触发
- touchcancel : 系统取消touch事件的时候触发。（例如你在浏览器里玩HTML5的游戏，这个时候你女朋友打电话进来了，就会触发touchcancel事件，游戏的作者就可以在这里做暂停游戏、自动存档等操作）
每个触摸事件都包括了三个触摸列表：
- touches : 当前位于屏幕上的所有手指动作的列表
- targetTouches : 位于当前 DOM 元素上的手指动作的列表
- changedTouches : 涉及当前事件的手指动作的列表。例如，在一个 touchend 事件中，这将是移开手指
这些列表由包含触摸信息的对象组成：
- identifier : 一个数值，touch对象的unique ID ，唯一标识触摸会话（touch session）中的当前手指
- target : DOM元素，是动作所针对的目标
- clientX / clientY : 触摸点相对于浏览器窗口viewport的位置，不包含滚动距离
- pageX / pageY : 触摸点相对于页面的位置，包含滚动距离
- screenX / screenY : 触摸点相对于屏幕的位置
- radiusX/radiusY/rotationAngle : 画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。(目前还没有得到的广泛的支持)
一个例子看清touch事件对象的所有属性,
Html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>一个例子看清touch事件对象的所有属性</title>
</head>
<body style="margin:0;padding:0; background:#eee;">
<div id="text">
<p class="att clintX">
clintX: <span></span>
</p>
<p class="att clintY">
clintY: <span></span>
</p>
<p class="att pageX">
pageX: <span></span>
</p>
<p class="att pageY">
pageY: <span></span>
</p>
<p class="att screenX">
screenX: <span></span>
</p>
<p class="att screenY">
screenY: <span></span>
</p>
<p class="att identifier">
identifier: <span></span>
</p>
<p class="att target">
target: <span></span>
</p>
</div>
</body>
</html>
css:
#text {
position: fixed;
left: 0;
top: 0;
width: 100%;
border: 1px solid #333;
}
javascript:
var windowHeight = window.innerHeight;
document.body.style.height = windowHeight * 2 + "px";
$("body").on("touchstart", function(e) {
$("#text .clintX span").text("").text(e.originalEvent.targetTouches[0].clientX);
$("#text .clintY span").text("").text(e.originalEvent.targetTouches[0].clientY);
$("#text .pageX span").text("").text(e.originalEvent.targetTouches[0].pageX);
$("#text .pageY span").text("").text(e.originalEvent.targetTouches[0].pageY);
$("#text .screenX span").text("").text(e.originalEvent.targetTouches[0].screenX);
$("#text .screenY span").text("").text(e.originalEvent.targetTouches[0].screenY);
$("#text .identifier span").text("").text(e.originalEvent.targetTouches[0].identifier);
$("#text .target span").text("").text(e.originalEvent.targetTouches[0].target);
});
在线测试地址：移动设备请访问：http://aresli.com/demo/touch-event/touch1.html
- 首先页面加载后在屏幕上随便点击，可以看到clientX/clientY和pageX/pageY和screenX/screenY是三组一模一样是数值。
- 然后稍微拖动点滚动条，可以看到只有pageX/pageY和screenX/screenY的值是相同的了。
- 然后双指放大页面，再随意点击，这时三组数值都不尽相同了。
而且可以发现放大页面对页面上得取值影响是很大的。所以在作一些web项目的时候，还是要尽可能的一上来就禁止缩放。
禁止缩放的meta代码是：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
还有一个会影响取值的行为就是浏览器的touchmove的默认行为。例如经典的 iOS overscroll 特效，会在滚动超出内容的界限时引发视图反弹。这种做法在很多的多点触控应用程序中会带来混乱，不过很容易就能停用：
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);