移动端touch事件和click事件的区别

星期二, 2016-08-16 11:26 — adminshiping1

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事件，看谁先触发。

html

[html]view plain copy 
<style>  
  .content{  
        height:500px;  
    background:#F00;  
  }  
</style>  
<div class="content"></div>  

[javascript]view plain copy 
var content = document.querySelector(".content");  
content.addEventListener("touchend", function(){  
     content.style.background = "#0F0";  
});  
content.addEventListener("click", function(){  
     content.style.background = "#00F";  
});  

上面逻辑是给content类名的div，绑定一个touch事件和一个click事件。分别让div的背景色变成绿色和蓝色。

手机测试一下，点击一下，div是先变成绿色然后又变成蓝色。

4.只触发touch事件，不去触发click事件

发现了preventDefault()的方法，阻止事件的默认行为。

[javascript]view plain copy 
<span style="color:#333333;">var content = document.querySelector(".content");  
content.addEventListener("touchstart", function(e){  
    </span><span style="color:#ff0000;">   e.preventDefault();</span><span style="color:#333333;">  
       content.style.background = "#0F0";  
})  
content.addEventListener("click", function(e){  
        content.style.background = "#00F";  
});</span>  

通过 preventDefault()方法，可以阻止后面事件的触发。

来自 http://blog.csdn.net/lululove19870526/article/details/44345759

普通分类:

javascript

You are here

移动端touch事件和click事件的区别