移动端触屏事件详解

在移动端开发过程中，我们有时候会遇到触摸事件和鼠标事件同时出现的情况，接下来就是我在chrome浏览器控制台下做得一些测试：

var body = document.getElementByTagName('body');

body = body[0];

然后给body添加触摸事件和鼠标事件

body.addEventListener('touchstart',function(){console.log('start')},false);

body.addEventListener('touchmove',function(){console.log('touchmove')},false);

body.addEventListener('touchend',function(){console.log('touchend')},false);

body.addEventListener('mousedown',function(){console.log('mousedown')},false);

body.addEventListener('mouseup',function(){console.log('mouseup')},false);

body.addEventListener('click',function(){console.log('click')},false);

 

第一种情况：长时间点击页面后松开手指

我们发现长时间点击只触发了触摸事件

 

第二种情况：点击不松手同时移动了手指手指离开

我们发现在移动端手指滑动屏幕时是没有触发鼠标事件的。

第三种情况：短暂点击后松开手指

当我们在移动端短暂点击页面时，触摸事件首先会被触发，而鼠标事件则在最后触发。