web移动端基础事件总结与应用

1.触摸事件touch

touchstart      手指放在屏幕上触发

touchmove    手指在屏幕上移动，连续触发

touchend       手指离开屏幕触发

touchcancel   当系统停止跟踪时触发，该事件暂时用不到

注意：

1.移动端只能事件只能通过监听函数添加，不能用on添加

2.移动端当中就不要用鼠标的事件

3.移动端的事件会触发浏览器的默认行为，所以在调用事件的时候要把默认行为阻止了ev.preventDefault。

demo:

document.addEventListener('touchstart',function(ev){
	 ev.preventDefault();
});
var box=document.getElementById("box");
box.addEventListener('touchstart',function(){
	 this.innerHTML='手指按下了';
});
box.addEventListener('touchmove',function(){
	 this.innerHTML='手指移动了';
});
box.addEventListener('touchend',function(){
	 this.innerHTML='手指离开了';
});

2.touch事件对象

ev.touches                 当前屏幕的手指列表

ev.targetTouches      当前元素上的手指列表

ev.changedTouches  触发当前事件的手指列表

每个touch对象都包含了以下几