Difference between touch event and click event on mobile

 Reprinted, not original;

Original address: http://blog.csdn.net/lululove19870526/article/details/44345759

 

 

Difference between touch event and click event on mobile

1.touch event

The following are four touch events

touchstart: //Triggered when the finger is placed on the screen

touchmove: //The finger slides on the screen to trigger

touchend: //Triggered when the finger leaves the screen

touchcancel: //Triggered when the system cancels the touch event, this seems to be less used

After each touch event is triggered, an event object is generated

2. Difference between touch event and click event

On the mobile side, when a finger clicks on an element, it will go through: touchstart --> touchmove -> touchend -->click.

 

The trigger conditions of touchstart and click are different . For browsers on handheld devices:

1.touchstart: touch the finger on this dom (or bubble to this dom, of course, this is nonsense) to trigger
2.click: touch the finger on this dom (or bubble to this dom, of course, this is nonsense) Start, and the finger has not moved on the screen (some browsers allow moving a very small displacement value), and on this dom the finger leaves the screen, and the interval between touching and leaving the screen is short (some The browser does not detect the interval time, but also triggers click) to trigger
, so we can see that it is not desirable to completely replace touchstart, but the delay caused by click on mobile handheld devices is also a problem.

 

3. Verify touchstart and click events to see who triggers first.

html

[html]  view plain copy  

 

1. <style>  
2.   .content{  
3.         height:500px;  
4.     background:#F00;  
5.   }  
6. </style>  
7. <divclass="content"></div>   

js

[javascript]  view plain copy  

 

1. var content = document.querySelector(".content");  
2. content.addEventListener("touchend", function(){  
3.      content.style.background = "#0F0";  
4. });  
5. content.addEventListener("click", function(){  
6.      content.style.background = "#00F";  
7. });  

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

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

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

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

[javascript]  view plain  copy

 

1. <span style="color:#333333;">var content = document.querySelector(".content");  
2. content.addEventListener("touchstart", function(e){  
3.     </span><span style="color:#ff0000;">   e.preventDefault();</span><span style="color:#333333;">  
4.        content.style.background = "#0F0";  
5. })  
6. content.addEventListener("click", function(e){  
7.         content.style.background = "#00F";  
8. });</span>  

Through the  preventDefault() method, you can prevent the triggering of subsequent events.