[js点滴]JavaScript之触摸事件07

触摸事件

触摸API由三个对象组成。

• Touch
• TouchList
• TouchEvent

Touch对象表示触摸点（一根手指或者一根触摸笔），用来描述触摸动作，包括位置、大小、形状、压力、目标元素等属性。有时，触摸动作由多个触摸点（多根手指或者多根触摸笔）组成，多个触摸点的集合由TouchList对象表示。TouchEvent对象代表由触摸引发的事件，只有触摸屏才会引发这一类事件。

很多时候，触摸事件和鼠标事件同时触发，即使这个时候并没有用到鼠标。这是为了让那些只定义鼠标事件、没有定义触摸事件的代码，在触摸屏的情况下仍然能用。如果想避免这种情况，可以用preventDefault方法阻止发出鼠标事件。

Touch对象

Touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。它有以下属性。

（1）identifier

identifier属性表示Touch实例的独一无二的识别符。它在整个触摸过程中保持不变。

var id = touchItem.identifier;

TouchList对象的identifiedTouch方法，可以根据这个属性，从一个集合里面取出对应的Touch对象。

（2）screenX，screenY，clientX，clientY，pageX，pageY

screenX属性和screenY属性，分别表示触摸点相对于屏幕左上角的横坐标和纵坐标，与页面是否滚动无关。

clientX属性和clientY属性，分别表示触摸点相对于浏览器视口左上角的横坐标和纵坐标，与页面是否滚动无关。

pageX属性和pageY属性，分别表示触摸点相对于当前页面左上角的横坐标和纵坐标，包含了页面滚动带来的位移。

（3）radiusX，radiusY，rotationAngle

radiusX属性和radiusY属性，分别返回触摸点周围受到影响的椭圆范围的X轴和Y轴，单位为像素。

rotationAngle属性表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间。

上面这三个属性共同定义了用户与屏幕接触的区域，对于描述手指这一类非精确的触摸，很有帮助。指尖接触屏幕，触摸范围会形成一个椭圆，这三个属性就用来描述这个椭圆区域。

（4）force

force属性返回一个0到1之间的数值，表示触摸压力。0代表没有压力，1代表硬件所能识别的最大压力。

（5）target

target属性返回一个Element节点，代表触摸发生的那个节点。

TouchList对象

TouchList对象是一个类似数组的对象，成员是与某个触摸事件相关的所有触摸点。比如，用户用三根手指触摸，产生的TouchList对象就有三个成员，每根手指对应一个Touch对象。

TouchList实例的length属性，返回TouchList对象的成员数量。

TouchList实例的identifiedTouch方法和item方法，分别使用id属性和索引值（从0开始）作为参数，取出指定的Touch对象。

TouchEvent对象

TouchEvent对象继承Event对象和UIEvent对象，表示触摸引发的事件。除了被继承的属性以外，它还有一些自己的属性。

（1）键盘相关属性

以下属性都为只读属性，返回一个布尔值，表示触摸的同时，是否按下某个键。

• altKey 是否按下alt键
• ctrlKey 是否按下ctrl键
• metaKey 是否按下meta键
• shiftKey 是否按下shift键

（2）changedTouches

changedTouches属性返回一个TouchList对象，包含了由当前触摸事件引发的所有Touch对象（即相关的触摸点）。

对于touchstart事件，它代表被激活的触摸点；对于touchmove事件，代表发生变化的触摸点；对于touchend事件，代表消失的触摸点（即不再被触碰的点）。

var touches = touchEvent.changedTouches;

（3）targetTouches

targetTouches属性返回一个TouchList对象，包含了触摸的目标Element节点内部，所有仍然处于活动状态的触摸点。

var touches = touchEvent.targetTouches;

（4）touches

touches属性返回一个TouchList对象，包含了所有仍然处于活动状态的触摸点。

var touches = touchEvent.touches;

触摸事件的种类

触摸引发的事件，有以下几类。可以通过TouchEvent.type属性，查看到底发生的是哪一种事件。

• touchstart：用户接触触摸屏时触发，它的target属性返回发生触摸的Element节点。

• touchend：用户不再接触触摸屏时（或者移出屏幕边缘时）触发，它的target属性与touchstart事件的target属性是一致的，它的changedTouches属性返回一个TouchList对象，包含所有不再触摸的触摸点（Touch对象）。

• touchmove：用户移动触摸点时触发，它的target属性与touchstart事件的target属性一致。如果触摸的半径、角度、力度发生变化，也会触发该事件。

• touchcancel：触摸点取消时触发，比如在触摸区域跳出一个情态窗口（modal window）、触摸点离开了文档区域（进入浏览器菜单栏区域）、用户放置更多的触摸点（自动取消早先的触摸点）。

下面是一个例子。

var el = document.getElementsByTagName("canvas")[0];
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchmove", handleMove, false);

function handleStart(evt) {
// 阻止浏览器继续处理触摸事件，
// 也阻止发出鼠标事件
evt.preventDefault();
var touches = evt.changedTouches;

for (var i = 0; i < touches.length; i++) {
console.log(touches[i].pageX, touches[i].pageY);
}
}

function handleMove(evt) {
evt.preventDefault();
var touches = evt.changedTouches;

for (var i = 0; i < touches.length; i++) {
var id = touches[i].identifier;
var touch = touches.identifiedTouch(id);
console.log(touch.pageX, touch.pageY);
}
}

表单事件

Input事件，select事件，change事件

以下事件与表单成员的值变化有关。

（1）input事件

input事件当<input>、<textarea>的值发生变化时触发。此外，打开contenteditable属性的元素，只要值发生变化，也会触发input事件。

input事件的一个特点，就是会连续触发，比如用户每次按下一次按键，就会触发一次input事件。

（2）select事件

select事件当在<input>、<textarea>中选中文本时触发。

// HTML代码为
// <input id="test" type="text" value="Select me!" />

var elem = document.getElementById(‘test’);
elem.addEventListener(‘select’, function() {
console.log(‘Selection changed!’);
}, false);

（3）Change事件

Change事件当<input>、<select>、<textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，而且input事件必然会引发change事件。具体来说，分成以下几种情况。

• 激活单选框（radio）或复选框（checkbox）时触发。
• 用户提交时触发。比如，从下列列表（select）完成选择，在日期或文件输入框完成选择。
• 当文本框或textarea元素的值发生改变，并且丧失焦点时触发。

下面是一个例子。

// HTML代码为
// <select size="1" onchange="changeEventHandler(event);">
//   <option>chocolate</option>
//   <option>strawberry</option>
//   <option>vanilla</option>
// </select>

function changeEventHandler(event) {
console.log(‘You like ’ + event.target.value + ’ ice cream.’);
}

reset事件，submit事件

以下事件发生在表单对象上，而不是发生在表单的成员上。

（1）reset事件

reset事件当表单重置（所有表单成员变回默认值）时触发。

（2）submit事件

submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是form元素，而不是button元素（即使它的类型是submit），因为提交的是表单，而不是按钮。