JS中的触摸事件

触摸事件与鼠标事件相比有两个不同点:
1)鼠标光标只有一个,而触摸点可能有很多;
2)鼠标光标可以悬停,而触摸点则不行。

1 给元素赋值触摸事件

事件类型 是否可以取消 是否走完整个冒泡式出发过程 描述 浏览器对该事件的默认处理方式
touchstart 用户将某个触摸点置于触摸界面之上 未定义
touchmove 用户在触摸界面上移动触摸点 未定义
touchend 触摸点离开了触摸区域 根据具体情况而定,可以将其视为:mousemove、mousedown、mouseup、click
touchcancel 触摸点的触摸动作被打断,或是触摸点个数超出了设备所能处理的范围 未定义
  • 方法一:
element.ontouchstart = function(e) {
	
}
  • 方法二:
element.addEventListener("touchstart", function(e){
	
})

2 TouchEvent对象

浏览器传递给触摸事件监听器的事件对象之中包含各种属性,见下表。
大部分情况下,只使用touches和changedTouches属性就够了。这两个属性值得类型都是TouchList,该类型是一个由Touch对象组成的列表。

属性名 属性值得数据类型 描述
touches TouchList 由于界面上触摸的各个触摸点所组成的列表
changedTouches TouchList 与上次触摸事件相比,发生改变的各个触摸点。对于touchstart事件来说,它表示那些刚刚被激活的触摸点;对于touchmove事件来说,表示那些位置发生了移动的触摸点;对于touchend与touchcancel事件来说,则表示那些不再停留于触摸界面之上的触摸点
targetTouches TouchList 正在界面上触摸且位于当前元素范围之内的那些触摸点。除非某个触摸点被拖到了元素范围之外,否则该列表就等同于touches列表
altKey、ctrlKey、metaKey、shiftKey boolean 如果在触摸事件发生时,与之对应的按键(Alt、Ctrl、Meta或Shift处于被按下的状态,那么其值就是true。由于某些移动设备并没有物理键盘,所以这些属性的值可能是不确定的)

3 TouchList对象

TouchList有两个属性
1)length
2)Touch identifiedTouch(identfier)
给定某个TouchList对象,我们可以通过length属性获取列表中所包含Touch对象的个数。其代码如下:

element.ontouchstart =function(e){
	alert(e.touches.length + ' touches on the device');
}

我们可以像操作数组那样,访问TouchList之中的每一个Touch元素;

element.ontouchstart = function(e){
	for(var i = 0; i <e.touches.length; i++) {
		alert("Touch at: " + e.touches[i].pageX + ',' + e.touches[i].pageY);
	}
}

每个Touch对象都有一个独特的标识符,如果TouchList其存在有特定标识符的Touch对象,那么identifiedTouch()方法就返回它。当你想要了解某一个触摸点是否参与了对个触摸事件时,该方法是很有用的。

4 Touch对象

触摸事件监听器最终还是需要检查Touch对象本身的属性。下表列出了Touch对象的各个属性。

属性名 属性值得数据类型 描述
clientX long 触摸点相对于视窗的X坐标。该值不将滚动条的高度计算在内。
clientY long 触摸点相对于视窗的Y坐标。该值不将滚动条的高度计算在内。
identifier long 代表触摸点身份的独特标识符,同一个触摸点的身份标识符在不同事件对象中保持不变
pageX long 触摸点相对于视窗的X坐标。该值会将滚动条的宽度计算在内
pageY long 触摸点相对于视窗Y的坐标。该值会将滚动条的高度计算在内
screenX long 触摸点相对于与屏幕的X坐标
screenY long 触摸点相对于与屏幕的Y坐标
target EventTarget 触摸动作开始时,触摸点所在的元素。就算该点其后被拖出了初始元素,target依然会指向一开始的那个元素

你可能感兴趣的:(前端)