vue-fastclick


移動端點擊延遲事件 

1. 移動端瀏覽器在派發點擊事件的時候,通常會出現300ms左右的延遲

2. 原因: 移動端的雙擊會縮放導致click判斷延遲


解決方式

1. 禁用縮放

   `<meta name = "viewport" content="user-scalable=no" > `

    缺點: 網頁無法縮放

2. 更改默認視口寬度

    `<meta name="viewport" content="width=device-width">`

    缺點: 需要瀏覽器的支持

3. css touch-action

    touch-action的默為 auto,將其置為 none 即可移除目標元素的 300 毫秒延遲

    缺點: 新屬性,可能存在瀏覽器兼容問題

4. tap事件

    zepto的tap事件, 利用touchstart和touchend來模擬click事件

    缺點: 點擊穿透

5. fastclick

    原理: 在檢測到touchend事件的時候,會通過DOM自定義事件立即出發模擬一個click事件,並把瀏覽器在300ms之后真正的click事件阻止掉

    缺點: 腳本相對較大

    使用:

    ```JS

    // 引入

   <script type='application/javascript' src='/path/to/fastclick.js'></script>

    // 使用了jquery的時候

    $(function() {

        FastClick.attach(document.body);

    });

    // 沒使用jquery的時候

    if ('addEventListener' in document) {

        document.addEventListener('DOMContentLoaded', function() {

            FastClick.attach(document.body);

        }, false);

    }

    ```

    在vue中使用

    ```js

    // 安裝

    npm install fastclick -S

    // 引入

    import FastClick from 'fastclick'

    // 使用

    FastClick.attach(document.body);

    ```



參考鏈接:https://www.jianshu.com/p/67bae6dfca90


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM