移动端基本touch事件实现

 

原文链接：mx前端-前端园地 

http://www.idouxs.cn/?p=917

touch事件模型现阶段规定了很多种类型的触摸事件，以下三种是应用最广泛的：

 

1. Touchstart：手指刚放到屏幕上某个DOM元素里的时候该元素触发

2. Touchmove：手指紧贴屏幕的时候连续触发

3. Touchend：手指从屏幕上抬起的时候触发

 

这些个事件都会顺着DOM树向上冒泡，并产生一个触摸事件对象。

Touches：表示当前位于屏幕上的所有手指动作的列表，是一个TouchList类型的对象，TouchList是一个类数组对象，它里面装的是Touch对象。

     pageX / pageY：触摸点相对于页面的位置

 

来看一个简单例子：

//touch所有类型事件都会冒泡

document.addEventListener('touchstart', function (e){

//如果阻止了 touchstart 的默认行为，后续的mousedown 和 click 事件将不会触发
e.preventDefault()

//如果已经生成小光点了就直接返回
if (spot){
return;
}
spot = document.createElement('div');
spot.classList.add('spot');

//这里设置的光点大小是70px，减去35px是为了让光点处于手指中间
spot.style.top = e.touches[0].pageY - 35 + 'px';
spot.style.left = e.touches[0].pageX - 35 + 'px';
document.body.appendChild(spot);
},false)

 

document.addEventListener('touchmove',function (e){

//阻止 touchmove 的默认行为，后续的 mousemove 事件将不会触发
e.preventDefault()
if (spot){
spot.style.top = e.touches[0].pageY - 35 + 'px';
spot.style.left = e.touches[0].pageX - 35 + 'px';
}
})

 

document.addEventListener('touchend',function (e){

//阻止 touchend 默认行为，后续的 mouseup 和 click 事件将不会触发
e.preventDefault();
if(spot){

//删除这个光点
document.body.removeChild(spot);
spot = null;
}
})

以上代码效果：当你将手指放到屏幕上时，屏幕上就会出现一个“光点”，随着手指移动，“光点”也会随之移动，如果手指移开屏幕，“光点”也会随之消失。

 

可以看到以上代码里无时无刻都在阻止默认的鼠标事件，在正常情况下，一次触摸会按下面这样的顺序触发事件：

touchstart   ~>

mousedown  ~>

touchmove  ~>

mousemove  ~>

touchend  ~>

mouseup  ~>

 

demo演示：请手机访问：

http://www.idounao.com/demo/basictouch.html