[js点击]JavaScript之原生触摸事件详解01

时间：2025-03-28 12:18:04

#触摸事件
###1.触摸事件概念
该类事件会在用户手指放在屏幕上面时，在屏幕上滑动时，或从屏幕上移开时触发。
###2.触摸事件种类
具体来说有以下几个触摸事件。


当手指放在屏幕上触发。

当手指在屏幕上滑动时，连续地触发。

当手指从屏幕上离开时触发。

当系统停止跟踪时触发，系统什么时候取消，文档没有明确的说明。

【总】以上四个，是w3c提供的触摸事件，只针对触摸设备，最常用的是前三个。

###3.触摸事件注意点

由于触摸会导致屏幕动来动去，所以可以会在这些事件的事件处理函数内使用()，来阻止屏幕的默认滚动。

规范提供了额外的三个触摸事件，但被测试的浏览器没有支持它们：

	1. touchenter：移动的手指进入一个DOM元素。
    2. toucheleave：移动手指离开一个DOM元素。
    3. touchcancel：触摸被中断（实现规范）。

#触摸事件相关的属性

1.三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：

1. touchstart：手指放在一个DOM元素上。 
2. touchmove：手指拖曳一个DOM元素。
3. touchend：手指从一个DOM元素上移开。

2.每个触摸事件都包括了三个触摸列表：

  1. touches：当前位于屏幕上的所有手指的一个列表。

当一个手指在触屏上时，=1,
当两个手指在触屏上时，=2，以此类推。

  1. targetTouches：位于当前DOM元素上的手指的一个列表。
    >targetTouches：特定于事件目标的touch对象数组。
    因为touch事件是会冒泡的，所以利用这个属性指出目标对象。

  2. changedTouches：涉及当前事件的手指的一个列表

    changedTouches：表示自上次触摸以来发生了什么改变的touch对象的数组。
    例如，在一个touchend事件中，这就会是移开的手指。

  3. 这些列表由包含了触摸信息的对象组成：

          1. identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。
      2. target：DOM元素，是动作所针对的目标。
      3. 客户/页面/屏幕坐标：动作在屏幕上发生的位置。
      4. 半径坐标和 rotationAngle：画出大约相当于手指形状的椭圆形。

  4. 每个touch对象都包含下列几个属性：

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

#触摸事件的使用

('touchstart',function(e){
				var ev = e||event;
				([0].clientX);
			});
('touchmove',function(e){
				var ev = e||event;
				([0].clientX);
			});

#触摸事件的注意点

使用clientX……时，必须要指明具体的touch对象，而不要直接指明数组。

	[0]
	在touchend事件处理函数中，当该事件发生时，touches里面已经没有任何的
	touch对象了，此时，就要使用changeTouches集合

#触摸事件的运用

	<div>
		触屏事件中，事件对象（e）包含了，类型均为TouchList[数组]	
		touches,手指按下屏幕的点的信息
		targetTouches,目标元素的所有当前触摸
		changedTouches，
		

	</div>
	<div ></div> 
	<script type="text/javascript">
	var block = ("block");
	("touchstart",function(e){
		(e);
		// var e = e || ;
		var touches = [0];
		var oLeft =  - ;
		var oTop =  - ;

		("touchmove",function(e) {
			var touches = [0];
			var bLeft =  - oLeft;
			var bTop =  - oTop;
			 = bLeft + "px";
			 = bTop + "px";
		},false)
	},false)


	// 为了避免移动端事件的默认行为对交互效果产生影响，建议阻止事件的默认行为，
	// 但这时不拖动div的时候默认事件也被取消了，解决方案，请看下一节
	("touchmove",function(e){
		();
	},false)
	</script>

下面请看事件介绍[js点击]JavaScript之触摸事件详解01

相关文章