You are here
移动端touch事件和click事件的区别 有大用 有大大用 有大大大用
移动端touch事件和click事件的区别，有需要的朋友可以参考下。
移动端touch事件和click事件的区别
1.touch事件
以下是四种touch事件
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
每个触摸事件被触发后，会生成一个event对象
2.touch事件和click事件的区别
在移动端，手指点击一个元素，会经过：touchstart
--> touchmove -> touchend --》click。
touchstart和click的触发条件就有区别，对于手持设备的浏览器：
1.touchstart：在这个dom（或冒泡到这个dom，这当然是废话）上手指触摸开始即能触发
2.click：在这个dom（或冒泡到这个dom，这当然是废话）上手指触摸开始，且手指未曾在屏幕上移动（某些浏览器允许移动一个非常小的位移值），且在这个在这个dom上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发
于是我们可以看到，完全用touchstart代替是不太可取的，但是click在移动手持设备上带来的延迟也是一个问题
3.验证touchstart和click事件，看谁先触发。
<style>
.content{
height:500px;
background:#F00;
}
</style>
<div class="content"></div>
js
var content = document.querySelector(".content");
content.addEventListener("touchend", function(){
alert("touched")
content.style.background = "#00FF00"; //00ff00 蓝色
});
content.addEventListener("click", function(){
alert("click")
content.style.background = "#0000FFF"; //0000ff 绿色
});
上面逻辑是给content类名的div，绑定一个touch事件和一个click事件。分别让div的背景色变成蓝色和绿色。
手机测试一下，点击一下，div是先变成蓝色然后又变成绿色。
(我测试 手机颜色 没看到绿色与蓝色的变化( 可能是因为变化太快) 最终为绿色 反正 有一点是肯定的 先弹出 touched ,再弹出 click) 所以说 先执行 touch事件,再执行click事件
4.只触发touch事件，不去触发click事件
var content = document.querySelector(".content");
content.addEventListener("touchstart", function(e){
content.style.background = "#00FF00"; //00ff00 蓝色
})
content.addEventListener("click", function(e){
content.style.background = "#0000FFF"; //0000ff 绿色
});
通过 touchstart 的 preventDefault()方法，可以阻止后面 click 事件的触发。直接变成了蓝色来自 http://www.aichengxu.com/view/47459
mousedown、mousemove、mouseup和touchstart、touchmove、touchend
拖动时候用到的三个事件：mousedown、mousemove、mouseup在移动端都不起任何作用。毕竟移动端是没有鼠标的，查资料后发现，在移动端与之相对应的分别是：touchstart、touchmove、touchend事件。还有一点要注意的是在PC端获取当前鼠标的坐标是：event.clientX和event.clientY，在移动端获取坐标位置则是：event.touches[0].clientX和event.touches[0].clientY。