《JavaScript高级程序设计》触摸事件

阅读更多

本文来自《JavaScript高级程序设计》阅读笔记

 

iOS版Safari新增了一些专有事件，因为iOS设备没有鼠标和键盘。

 

1、触摸事件：

 

 

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

• touchmove    当手指在屏幕上滑动时候连续触发，可以用preventDefault阻止

• touchend       当手指从屏幕上移开时候触发

• touchcancle  当系统停止跟踪触摸时候触发

 

2、 属性：

 

每一个触摸事件的event对象常见属性：

 

• bubbles
• cancelable
• view
• clientX
• clientY
• screenX
• screenY
• detail
• altKey
• shiftKey
• ctrlKey
• metaKey

还包含3个用于 跟踪触摸的属性：

 

• touches                 当前跟踪的触摸操作的Touch对象的数组
• targetTouchs        特定于事件目标的Touch对象的数组
• changeTouches    自上次触摸以来发生了什么改变的Touch对象的数组

  每一个 Touch对象包含下列属性：

 

• clientX触摸目标在视口中的x坐标
• clientY触摸目标在视口中的y坐标
• pageX触摸目标在页面中的x坐标
• pageY触摸目标在页面中的y坐标
• screenX触摸目标在屏幕中的x坐标
• screenY触摸目标在屏幕中的y坐标
• target触摸的DOM节点目标
• identifier标识触摸的唯一ID

 

 

实例代码：

 

function handleTouchEvent(event){
	if(event.touches.length == 1){
		var output = document.getElementById("output");
		switch(event.type){
			case "touchstart":
				output.innerHTML = "Touch started (" + event.touches[0].clientX + ","+event.touches[0].clientY+")";
			case "touchend":
				output.innerHTML = "Touch ended (" + event.changedTouches[0].clientX + ","+event.changedTouches[0].clientY+")";
			case "touchmove":
				event.preventDefault();
				output.innerHTML = "Touch moved (" + event.changedTouches[0].clientX + ","+event.changedTouches[0].clientY+")";
		}
	}
}

 

触摸事件的 顺序：

 

• touchstart
• mouseover
• mouseover(一次)
• mousedown
• mouseup
• click
• touchend

 

浏览器支持：

 

• iOS Safari
• Android版Webkit
• LG专有的OS中的Phantom