javascript - Kann Tap das Problem einer Klickverzögerung von 300 ms lösen?
给我你的怀抱
给我你的怀抱 2017-05-19 10:13:16
0
5
555

klicken und tippen

Die am meisten empfohlene Schreibmethode auf dem mobilen Endgerät ist die Verwendung des Tipp-Ereignisses anstelle des Klick-Ereignisses. Der Grund dafür ist im Allgemeinen, dass das Klick-Ereignis die legendäre Verzögerung von 300 ms aufweist.

Testergebnisse

Der eigentliche Test ergab jedoch, dass das Klickereignis schneller ist als das Tippereignis.

Die Auslöseverzögerung von Klicken und Tippen beträgt nur etwa 100 ms

Demo

     click&tap  
  

click me

Ausgabe

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

Verwandte Fragen

Wenn das mobile Endgerät das Tap-Ereignis von Zepto verwendet, ist es etwas transparent.

Der Grund ist im Allgemeinen: Das übergeordnete DOM (normalerweise die Maskenebene) ist im Tap-Ereignis geschlossen oder ausgeblendet, und das untergeordnete DOM verfügt zufällig auch über ein Klickereignis, das dazu führt, dass das untergeordnete DOM aufgrund des Ereignisflussmechanismus fehlschlägt ( Capture-Blubbern) Das Click-Ereignis wird ebenfalls ausgelöst.

Analyse: Wenn sie sich alle in der Blasenphase befinden (die standardmäßige Blasenphase, wenn Ereignisse ausgelöst werden), wird die übergeordnete Gruppe definitiv nach der Teilmenge ausgelöst und es sollte kein Point-Through-Phänomen auftreten.

Einige Blog-Artikel sagen, dass die übergeordnete Gruppe das Tippen und die Teilmenge das Klicken verwendet. Betrachtet man den Auslösezeitpunkt in der Demo, ist es unwahrscheinlich, dass dies geschieht.

Der Hauptgrund ist, dass es einen Idioten gibt, der gleichzeitig Klicken und Tippen in derselben Geschäftslogik verwendet?

Im Grunde fühlt es sich also so an, als ob die Capture-Phase hauptsächlich dazu genutzt wird, gleichzeitig Ereignisse auszulösen. Es gibt jedoch auch ein Problem. Der Ereignismechanismus von Zepto basiert auf dem Ereignis-Bubbling, und Ereignisse in touch.js sind an Dokumente gebunden.

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

Antworte allen (5)
Peter_Zhu

都用tap 或者引入fastclick.js

    阿神

    建议引用fastclick.js,可以解决click事件会有300毫秒的延迟
    官网 https://github.com/ftlabs/fas...

      Peter_Zhu

      zepto的tap事件也只是模拟,而且效率也一般,自然没有原生的click响应快。如果是比较简单的需求(比如只需要响应“点击”事件),可以考虑用fastclick,好处是原有的click事件处理不用改,且可以同时适配pc端和移动端。但如果只是移动端需求,那直接用原生的touchstart事件就可以了。

      另外还有一种解决思路是直接上手势库,比如Hammerjs或者腾讯的AlloyFinger之类的,适合有比较复杂的手势需求的场景。

        巴扎黑

        为啥不考虑下touchstart

          黄舟

          纠正一下你的点透事件的原因哦,不是因为冒泡机制,而是因为点击事件的延迟。

          • 比如,点击关闭按钮,touchend首先触发tap,弹出层和遮罩就被隐藏了。touchend后继续等待300ms发现没有其他行为了,则继续触发click,由于这时弹出层已经消失,所以当前click事件的target就在底层元素上,于是就触发了底层事件内容。整个事件触发过程为 touchend -> tap -> click。

            Neueste Downloads
            Mehr>
            Web-Effekte
            Quellcode der Website
            Website-Materialien
            Frontend-Vorlage
            Über uns Haftungsausschluss Sitemap
            Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!