html5的触摸事件

1.触摸事件有哪些

touchstart,touchmove,touchend

2.分别什么时候触发

  touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。

  touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。

  touchend事件:当手指从屏幕上离开的时候触发。

3.每个事件中的touch对象如何获得

  touches:表示当前跟踪的触摸操作的touch对象的数组。

  targetTouches:特定于事件目标的Touch对象的数组。

  changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

最好统一使用一个touch对象数组

4.如何获得touch对象的相应属性

  clientX:触摸目标在视口中的x坐标。

  clientY:触摸目标在视口中的y坐标。

  identifier:标识触摸的唯一ID。

  pageX:触摸目标在页面中的x坐标。

  pageY:触摸目标在页面中的y坐标。

  screenX:触摸目标在屏幕中的x坐标。

  screenY:触摸目标在屏幕中的y坐标。

  target:触目的DOM节点目标。

5.举例子

function load (){

    document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false); function touch (event){
var event = event || window.event; var oInp = document.getElementById("inp"); switch(event.type){
case "touchstart":
oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
} }
}
window.addEventListener('load',load, false);

  

上一篇:Node.js高级编程读书笔记 - 5 数据库 - Never


下一篇:XCOJ 1168 (搜索+期望+高斯消元法)