JavaScript 移动端触发事件

一、移动端常用的触发事件

1. touchstart 开始触摸事件
2. touchmove 开始滑动事件
3. touchend 触摸结束事件
4. touchcancel 触摸意外中断事件

二、添加事件的方式

在移动端添加 touch 事件的时候，我们可以采用 DOM 为我们提供的方法，即 addEventListener。

<script type="text/javascript">
		// 1,获取dom元素
		var div=document.querySelector('div');
		// 2,添加事件
		// 添加开始触摸事件: 当手指触摸到屏幕时触发
		div.addEventListener('touchstart',function(){
			console.log('touchstart');
		})
		// 添加手指滑动事件,当手指在屏幕上滑动时触发: move事件是持续触发
		div.addEventListener('touchmove',function(){
			console.log('touchmove');
		})
		// 添加触摸结束事件: 当手指离开屏幕时触发
		div.addEventListener('touchend',function(){
			console.log('touchend');
		})
		// 添加触摸以外中断事件
		div.addEventListener('touchcancel',function(){
		    console.log('touchcancel');
		})
</script>

三、移动端的触屏单击事件

移动端的触屏单击事件，我们采用 touchstart 事件，而不用 click 事件，那是因为 click 事件有延迟，而我们的 touchstart 事件无延迟，采用这种方式，可以保障程序的运行速度，以及提供用户体验度。

四、打印事件对象

打印事件对象，我们可以采用event.touches，当然我们也可以使用event.changedTouches的方法，一般情况下，我们建议使用后者。

打印结果如下：

一般情况下，我们要获取触摸的坐标，即 x、y 坐标，我们会使用 clientX、clientY，而不是使用 pageX、pageY，那是因为后者是我们PC端获取坐标值的方法，而在我们移动端，建议还是使用前者。

五、获取触摸位置

在第四小节，我们已经讲到，获取触摸位置的坐标，我们一般使用 clientX、clientY，具体写法如下：

X=event.targetTouches[0].clientX;  //当前触摸的位置(x轴)
Y=event.targetTouches[0].clientY;  //当前触摸的位置(y轴)

为什么会有一个 [0]，那是因为我们获取的是当前触摸的位置，或者说就是手指离开时的对象。