移動端tap事件(輕擊、輕觸)

來源:互聯網
上載者:User

標籤:window   oct   script   ftl   事件   padding   list   har   假設   

一、問題

①移動端也有click點擊事件,click點擊會延遲200~300ms

②因為點擊的響應過慢,影響了使用者體驗,所以需要解決響應慢的問題

二、解決方案

①使用tap事件:即輕擊,輕敲,響應速度快(不是原生事件,是通過touch相關事件衍生過來的)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>tap事件</title>    <style>        .body{            margin: 0;            padding: 0;        }        .box{            width: 200px;            height: 200px;background: #ccc;            float: left;        }    </style></head><body>    <div class="box"></div>    <script>        window.onload=function(){            // 封裝事件            bindTapEvent=function(dom,tapCallback,clickCallback){                var startTime=0;                var isMove=false;                dom.addEventListener(‘touchstart‘,function(e){                    startTime=Date.now()                });                dom.addEventListener(‘touchmove‘,function(e){                    isMove=true                });                dom.addEventListener(‘touchend‘,function(e){                                        if((Date.now()-startTime)<150 && isMove){                        // 假設點擊的時間間隔小於150ms為輕擊事件                        tapCallback && tapCallback.call(this,e)                    }else{                        // 假設點擊的時間間隔大於150ms為點擊事件                        clickCallback && clickCallback.call(this,e)                    }                    startTime=0;                    isMove=false;                });            }            // 調用            bindTapEvent(document.querySelector(‘.box‘),function(e){                console.log(‘tap事件‘)            },function(e){                console.log(‘click事件‘)            })        }    </script></body></html>

②使用fastclick.js外掛程式:可以提高移動端click響應速度,:https://github.com/ftlabs/fastclick

    <script src="fastclick.js"></script>    <script>        // 當頁面的dom元素載入完成        document.addEventListener(‘DOMContentLoaded‘,function(){            // 初始化方法            FastClick.attach(document.body);        },false);        // 正常使用click事件即可    </script>

具體用法可以參考:

移動端tap事件(輕擊、輕觸)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.