移动端触屏事件（touch）总结

触摸事件：

1. touchstart:触摸开始时触发

2. touchmove: 触摸移动时触发

3. touchend: 触摸结束时触发

触摸点：

1. touches: 当前位于屏幕上的所有的手指

2. targetTouches: 位于当前dom元素上的手指

3. changedTouches: 涉及当前事件的手指

触摸点包含的触摸信息：
1. identifier: touch对象的id

2. target: 当前的dom对象

3. pageX/pageY/clientX/clientY/screenX/screenY: 动作在屏幕上发生的位置

   page 包含滚动距离

   client不包含滚动距离

   screen以屏幕为基准

<script>
var obj=document.getElementById('box');
obj.addEventListener('touchmove', function (e) {
if(e.targetTouches.length==1){
e.preventDefault();
var touch= e.targetTouches[0];
obj.style.left=touch.pageX-50+'px';
obj.style.top=touch.pageY-50+'px';
}
},false);
</script>

 

注意：

手指在滑动的时候，会影响浏览器的行为。所以在使用touch事件的时候，要禁止缩放和滚动

1 禁止缩放

<</span>meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" user-scalable='no'/>

2 禁止滚动

e. preventDefault();