Touch触摸事件详解

作者：TG 日期： 2016-05-28 字数： 6923 阅读： 6163

为了给触摸界面提供有力支持, 触摸事件提供了响应用户对触摸屏或者触摸板上操作的能力。

一、触摸事件的类型

1.1 touchstart

当用户在触摸平面上放置了一个触点时触发。

事件的目标 element 将是触点位置上的那个目标 element。

element.addEventListener("touchstart",function(e){})

1.2 touchend

当一个触点被用户从触摸平面上移除（当用户将一个手指离开触摸平面）时触发。当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。

element.addEventListener("touchend",function(e){})

1.3 touchmove

当用户在触摸平面上移动触点时触发。

element.addEventListener("touchmove",function(e){})

1.4 touchcancel

当触点由于某些原因被中断时触发。

element.addEventListener("touchcancel",function(e){})

有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）：

由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。
触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。
当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。

1.5 touchenter

当触点进入某个 element 时触发。类似touchstart

注意: 此事件没有冒泡过程。

1.6 touchleave

当触点离开某个 element 时触发。

注意: 此事件没有冒泡过程。

注意: 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。如果你使用了触摸事件，可以调用 event.preventDefault() 来阻止鼠标事件被触发（一般都是在touchmove里加）。

如果你要获取当前是哪个Touch触摸事件类型，我们可以通过检查触摸事件的 TouchEvent.type 属性来确定当前事件属于哪种类型。

二、Touch

每个 Touch 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element 描述。

属性：

screenX/screenY 触点相对于屏幕左边沿的X坐标和Y坐标（只读属性）

兼容性：所有浏览器均支持

clientX/clientY 触点相对于可视区左边沿的X坐标和Y坐标（只读属性）

兼容性：所有浏览器均支持

pageX/pageY 触点相对于HTML文档上边沿的X坐标和Y坐标。当存在滚动偏移时，这两个值包含了滚动偏移的值。（只读属性）

兼容性：除IE6/7/8不支持外，其余浏览器均支持

offsetX/offsetY 触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。

兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持

radiusX/radiusY 能够包围用户和触摸平面的接触面的最小椭圆的X轴半径和Y轴半径

force 手指挤压触摸平面的压力大小，值从0（无压力）到1（最大压力）的浮点数（只读属性）

target 当前被触摸的elemnt （只读属性）

三、TouchList

TouchList 对象代表多个触点的一个列表.

一个 TouchList 代表一个触摸平面上所有触点的列表; 比如说, 如果一个用户用三根手指接触屏幕(或者触控板), 与之相关的TouchList 对于每根手指都会生成一个 Touch 对象, 共计三个.

属性

length 返回touchList中的touch对象的数量（只读属性）

item() 返回列表中以指定作为索引的touch对象

四、其他事件属性

touches : 在屏幕上的所有手指列表

targetTouches : 在当前DOM上的手指列表

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

event.touches

event.targetTouches

event.changeTouches

属性

length 返回touch对象的数量

五、JQuery的touch事件

$(element).mousemove(function(e) { 
    var xx = e.originalEvent.x || e.originalEvent.layerX || 0; 
    var yy = e.originalEvent.y || e.originalEvent.layerY || 0; 
});

或者用pageX/pageY

$(element).mousemove(function(e) {  
    var xx=e.pageX；
    var yy=e.pageY;
});

六、简单的canvas绘图

<canvas id="canvas" style="border:1px solid #000;background:#666"></canvas>
		<script>
			var canvas=document.getElementById("canvas");
			var wWith=window.innerWidth;
			var wHeight=window.innerHeight;
			canvas.width=wWith;
			canvas.height=wHeight;
			var cxt=canvas.getContext("2d");
			cxt.strokeStyle="#fff";
                        cxt.lineJoin="round";
			cxt.lineWidth="10";
			var sX,sY;
			canvas.addEventListener("touchstart",function(e){
				e.preventDefault();
				if (e.targetTouches.length == 1) {
			           var touch = e.targetTouches[0];
			           sX=Math.floor(touch.pageX)-Math.floor(canvas.offsetLeft);
			           sY=Math.floor(touch.pageY)-Math.floor(canvas.offsetTop);
			        }
				cxt.moveTo(sX,sY);
			});
			canvas.addEventListener("touchmove",function(e){
				var e=e || window.event;
				var touch = e.targetTouches[0];
				var x=Math.floor(touch.pageX)-Math.floor(canvas.offsetLeft);
				var y=Math.floor(touch.pageY)-Math.floor(canvas.offsetTop);
				cxt.lineTo(x,y);
				cxt.stroke();
				sX=x;
				sY=y;
			});
			canvas.addEventListener("touchend",function(e){

			});
		</script>

著作权归博主所有。转载请联系博主获得授权，并标注“博主名称”。

Touch触摸事件详解

关注”全栈技术杂货铺“

目录