简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Can tap solve the problem of click delay of 300ms?
给我你的怀抱
给我你的怀抱 2017-05-19 10:13:16
0
5
566

click&tap

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.

Test Results

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

demo

<!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

//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 1494338414084

Related questions

When 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.

给我你的怀抱
给我你的怀抱

reply all(5)
Peter_Zhu
Peter_Zhu2017-05-19 10:15:16 5 floor

Use tap or introduce fastclick.js

Like +0
Add Reply
阿神
阿神2017-05-19 10:15:16 4 floor

It is recommended to quotefastclick.js,可以解决clickThe event will have a delay of 300 milliseconds
Official website https://github.com/ftlabs/fas...

Like +0
Add Reply
Peter_Zhu
Peter_Zhu2017-05-19 10:15:16 3 floor

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.

Like +0
Add Reply
巴扎黑
巴扎黑2017-05-19 10:15:16 2 floor

Why not consider touchstart

Like +0
Add Reply
黄舟
黄舟2017-05-19 10:15:16 1 floor

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.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！