The most recommended writing method on the mobile terminal is to use zepto's tap event instead of click. The reason is generally that the click event has the legendary 300ms delay.
But the actual test found that the click event is faster than the tap event.
The trigger delay of click and tap is only about 100ms
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>click&tap</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
h3 {
text-align: center;
line-height: 50px;
border-bottom: 1px solid #c7c7c7;
}
</style>
</head>
<body>
<h3 id="h3">click me</h3>
</body>
<script type="text/javascript" src="../../common/zepto.js"></script>
<script type="text/javascript" src="../../common/touch.js"></script>
<script type="text/javascript">
// click 事件延迟问题
document.getElementById('h3').addEventListener('click', function (e) {
console.log("=========click1======")
console.log(new Date().getTime());
});
$("#h3").on('tap', function (e) {
console.log("=========zepto tap1======")
console.log(new Date().getTime());
});
document.getElementById('h3').addEventListener('click', function (e) {
console.log("=========click2======")
console.log(new Date().getTime());
});
$("#h3").on('tap', function (e) {
console.log("=========zepto tap2======")
console.log(new Date().getTime());
});
document.getElementById('h3').addEventListener('touchend', function (e) {
console.log("=========touchend======")
console.log(new Date().getTime());
});
document.getElementById('h3').addEventListener('touchstart', function (e) {
console.log("=========touchstart======")
console.log(new Date().getTime());
});
</script>
</html>//output
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:56 =========touchstart======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:57 1494338413993
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:51 =========touchend======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:52 1494338414081
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:31 =========click1======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:32 1494338414082
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:41 =========click2======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:42 1494338414083
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:36 =========zepto tap1======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:37 1494338414084
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:46 =========zepto tap2======
click&tap.html?_ijt=jcsp6kceg9n7qagit0tsqmnrn3:47 1494338414084When the mobile terminal uses zepto's tap event, it will be a bit transparent.
The reason is generally: the dom of the parent (usually the mask layer) is closed or hidden in the tap event, and the child dom happens to have a click event, so the child dom happens to have a click event due to the event flow mechanism (capture bubbling). The click event is also triggered by the level DOM.
Analysis: If they are all in the bubbling stage (the default bubbling stage for event triggering), the parent will definitely be triggered after the subset, and there should be no point-through phenomenon.
Some blog articles say that the parent uses tap and the subset uses click. Looking at the trigger time in the demo, this is unlikely to happen.
Mainly because there will be that idiot who uses click and tap at the same time in the same business logic?
So basically it feels like the capture phase is mainly used to trigger events at the same time. But there is also a problem. Zepto's event mechanism is based on event bubbling, and events in touch.js are bound to documents.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Use tap or introduce fastclick.js
It is recommended to quote
fastclick.js,可以解决clickThe event will have a delay of 300 millisecondsOfficial website https://github.com/ftlabs/fas...
zepto's tap event is only a simulation, and its efficiency is average. Naturally, it is not as fast as the native click response. If it is a relatively simple requirement (for example, you only need to respond to a "click" event), you can consider using fastclick. The advantage is that the original click event processing does not need to be changed, and it can be adapted to both PC and mobile terminals. But if it is only a mobile requirement, then just use the native touchstart event.
Another solution is to directly use a gesture library, such as Hammerjs or Tencent's AlloyFinger, which is suitable for scenarios with more complex gesture requirements.
Why not consider touchstart
Correct the reason for your click event. It is not because of the bubbling mechanism, but because of the delay of the click event.
For example, when you click the close button, touchend triggers the tap first, and the pop-up layer and mask are hidden. After touchend, continue to wait for 300ms and find that there is no other behavior, then continue to trigger click. Since the pop-up layer has disappeared at this time, the target of the current click event is on the underlying element, so the underlying event content is triggered. The entire event triggering process is touchend -> tap -> click.