2. 程式人生 > >使用原生JS封裝Tap事件，解決移動端300ms延遲

使用原生JS封裝Tap事件，解決移動端300ms延遲

阿新 • • 發佈：2017-05-12
itl dia can 開發 閉包 tcl type 移動端 com

為了防止誤操作，移動端iOS操作系統針對原生click事件做了300ms的延遲，這在一定程度上影響了我們的使用體驗。

GitHub項目地址：https://github.com/SimonZhangITer/MyTapEvent

FastClick

現在有現成的插件fastclick可以解決這個問題，但是也有弊端：

  • GitHub上最新版本的插件大小為25.4kb，輕量為趨勢，能省則省。
  • 它的核心思想是取消默認的click時間，判斷當前dom節點的類型進行相應的操作，這個判斷過程較為繁瑣。

MyTapEvent

本人最近在做微信項目，由於fastclick插件存在一定弊端，因此開發了一個簡單的tap事件，主要思想有以下幾點：

Thinking

  • 一次tap事件包含touchstart和touchmove(輕微移動)以及touchend三種狀態
  • callback方法在touchend後執行
  • 根據chrome瀏覽器默認的判斷取消點擊的移動量，手指偏移量（水平或垂直）超過15px則判定為滾動，取消執行tap事件
  • 手指按下時間過長不視為點擊，默認時間間隔為500ms
  • 使用HTMLElement來擴充原型，方便添加Event
  • 使用單例模式，確保只加載一次

ok，思想定下來，代碼寫起來就清晰多了：

if (!HTMLElement.prototype.addTapEvent) {
    HTMLElement.prototype.addTapEvent = function(callback) {
        var tapStartTime = 0,
            tapEndTime = 0,
            tapTime = 500, //tap等待時間，在此事件下松開可觸發方法
            tapStartClientX = 0,
            tapStartClientY = 0,
            tapEndClientX = 0,
            tapEndClientY = 0,
            tapScollHeight = 15, //水平或垂直方向移動超過15px測判定為取消（根據chrome瀏覽器默認的判斷取消點擊的移動量)
            cancleClick = false;
        this.addEventListener(‘touchstart‘, function() {
            tapStartTime = event.timeStamp;
            var touch = event.changedTouches[0];
            tapStartClientX = touch.clientX;
            tapStartClientY = touch.clientY;
            cancleClick = false;
        })
        this.addEventListener(‘touchmove‘, function() {
            var touch = event.changedTouches[0];
            tapEndClientX = touch.clientX;
            tapEndClientY = touch.clientY;
            if ((Math.abs(tapEndClientX - tapStartClientX) > tapScollHeight) || (Math.abs(tapEndClientY - tapStartClientY) > tapScollHeight)) {
                cancleClick = true;
            }
        })
        this.addEventListener(‘touchend‘, function() {
            tapEndTime = event.timeStamp;
            if (!cancleClick && (tapEndTime - tapStartTime) <= tapTime) {
                callback();
            }
        })
    }
}

Usage

HTMLElement.addTapEvent(function(){
    //do something...
})
如：
document.querySelect(‘#test‘).addTapEvent(function(){
    alert(‘this is a tap event‘);
})

Case

這裏給一個移動端案例，同時也包含了閉包的知識，前20項為tap事件，後30項為click事件，大家可以在手機上試一下效果，感受一下兩種方法的差別：

<style media="screen">
    li {
        padding: 20px;
    }

</style>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no,email=no">
        <meta name="x5-orientation" content="portrait">
        <title>test</title>
    </head>
    <body>
        <ul></ul>
    </body>
    <script type="text/javascript">
        if (!HTMLElement.prototype.addTapEvent) {
            HTMLElement.prototype.addTapEvent = function(callback) {
                var tapStartTime = 0,
                    tapEndTime = 0,
                    tapTime = 500, //tap等待時間，在此事件下松開可觸發方法
                    tapStartClientX = 0,
                    tapStartClientY = 0,
                    tapEndClientX = 0,
                    tapEndClientY = 0,
                    tapScollHeight = 15, //水平或垂直方向移動超過15px測判定為取消（根據chrome瀏覽器默認的判斷取消點擊的移動量)
                    cancleClick = false;
                this.addEventListener(‘touchstart‘, function() {
                    tapStartTime = event.timeStamp;
                    var touch = event.changedTouches[0];
                    tapStartClientX = touch.clientX;
                    tapStartClientY = touch.clientY;
                    cancleClick = false;
                })
                this.addEventListener(‘touchmove‘, function() {
                    var touch = event.changedTouches[0];
                    tapEndClientX = touch.clientX;
                    tapEndClientY = touch.clientY;
                    if ((Math.abs(tapEndClientX - tapStartClientX) > tapScollHeight) || (Math.abs(tapEndClientY - tapStartClientY) > tapScollHeight)) {
                        cancleClick = true;
                    }
                })
                this.addEventListener(‘touchend‘, function() {
                    tapEndTime = event.timeStamp;
                    if (!cancleClick && (tapEndTime - tapStartTime) <= tapTime) {
                        callback();
                    }
                })
            }
        }

        var ul = document.querySelector(‘ul‘);
        for (var i = 1; i <= 20; i++) {
            var li = document.createElement(‘li‘);
            li.innerHTML = i;
            li.addTapEvent(function() {
                var x = i;
                return function() {
                    alert(x);
                }
            }())
            ul.appendChild(li);
        }
        for (var j = 21; j <= 50
 
; j++) {
            var li = document.createElement(‘li‘);
            li.innerHTML = j;
            li.onclick = function() {
                var x = j;
                returnfunction() {
                    alert(x);
                }
            }()
            ul.appendChild(li);
        }
    </script>
</html>
? 著作權歸作者所有

使用原生JS封裝Tap事件，解決移動端300ms延遲

相關推薦

使用原生JS封裝Tap事件，解決移動端300ms延遲

itl dia can 開發 閉包 tcl type 移動端 com 為了防止誤操作，移動端iOS操作系統針對原生click事件做了300ms的延遲，這在一定程度上影響了我們的使用體驗。 GitHub項目地址：https://github.com/Simon

原生js封裝tap

type add 產生 tlist 移動 listener als lba false // tap事件封裝function tap(obj, callBack){ if(typeof obj != ‘object‘) return; // 變量 var

教你小三角，適用移動端等，解決移動端a標簽的默認樣式

utf-8 劃線 hover -s html 出現 class span charset 1.小三角，通過給一個div設置足夠大的邊框，讓它的上邊框，右邊框，左邊框，的背景顏色設置成透明的，來實現，如下： <!DOCTYPE html> <html>

bc現金盤開發移動端300ms延遲的解決方法

a標簽 touchend 如果能 缺點 響應式 fas view fastclick ast 方法一：bc現金盤開發禁止縮放（在meta標簽中設置） Chorm和Firfox支持,Safari比較麻煩他還有雙擊縮放還有雙擊滾動操作 <meta name="v

移動端300ms延遲

參考文章：https://blog.csdn.net/qq_41047322/article/details/81287325 親測：設定<meta name='viewport' content='width=device-width'/>並沒有改變click事件的延遲。因此，移動

原生js封裝jsonp，解決跨域問題

function jsonp(url, options) { // 建立script標籤 var $script = document.createElement('script'); // 解決快取問題 var f = url.indexOf('?') > -

fastclick.js解決移動端（ipad）點擊事件反應慢問題

javascrip tag 區間 spa doc base blog data- ava 參考http://blog.csdn.net/xjun0812/article/details/64919063 　　　　http://www.jianshu.com/p/16d3e4

原生JS封裝變速移動函式

思想：如果當前位置為now，目標距離為aim，那麼每次移動的距離step為（aim-now）/10,如果step大於0，則想上取整，step=Math.ceil(step);反之則向下取整，step=Math.floor(step); 程式碼如下： //變速移動函式封裝 function

只能輸入數值封裝，input或者contentable==true的div，解決網上其他方法的bug，相容移動端。

/** * 限制只能輸入number * @param {[type]} dom [限制的dom類名] */ function checkNumer(dom) { if (typeof $ == 'function') { let inp = $

UICollectionViewCell，UITableViewCell點選與tap事件衝突解決方案

當界涉及到到點選螢幕隱藏鍵盤等需要在self.view上新增單擊手勢的時候，如果介面上有UICollectionView或者UITableView就會導致cell的select代理不響應一、這時候如果我們想點選整個collectionView都不響應手勢，可以進行如下操作： 

原生js繫結事件方法簡單封裝

const ListenerFN = function ({ target, event, FN, option = {} }) { if (target, event, FN) Error('ta

JS動態生成的元素，其對應的方法不響應（比如單擊事件，滑鼠移動事件等）

主要原因：在頁面給元素註冊點選事件的時候【 $(function () {  XXX }); 】，JS動態生成的元素還尚未生成，所以click事件就沒有生效 解決方法： 方案一：js動態生成元素後再給其註冊事件 【註冊事件放在動態生成的js下面（js是從上往下執行的，當註冊事件的時候元素已經生成了

js原生輪播圖，支援移動端

window.onload = function(){ var container = document.getElementById('container'); var list = document.getElementById('list'); var bu

原生js實現outerWidth()方法，用到getComputedStyle

turn left func ltview wid nts dst fault 方法 function getTrueStyle(obj,attr){ if(obj.currentStyle){ //ie return obj.currentStyle[at

原生JS封裝Ajax

tex urlencode new text repl ons xmlhttp tolower 字符 function json2url(json){ 　　//json參數轉字符串 　　json.t=‘‘+Math.random(); 　　json.t=json.t.rep

使用原生js封裝webapp滑動效果(慣性滑動、滑動回彈)

pla 手指 測試 距離 ack cti 時間 .proto start PC 移動端兼容 IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 慣性助動，滑動回彈 門面模式 window.onload = function() { /*測試

解決移動端頁面滾動後不觸發touchend事件

spa scrip code cli 時有 解決方法 ng- clas parent 解決移動端頁面滾動後不觸發touchend事件 問題 在移動端頁面進行優化時，一般使用touch事件替代鼠標相關事件。用的較多的是使用touchend事件替代P

原生Js封裝ajax方法

() www toupper -type get data function form encodeuri // ajax封裝function ajax(options) { /** * 傳入方式默認為對象 * */ options = opti

原生JS封裝animate運動框架

gets 中一 etc fun lag set 屬性 target position <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <

百度地圖手機端單觸點單擊和長按事件，解決部分手機(小米手機)地圖單擊事件失效，多觸點、拖動依然觸發長按的bug

|| ble apply timeout console dto eat 問題 int /** * Author 嶽曉 * * 對百度地圖的事件擴展，目前擴展了fastclick和longclick, * 解決某些設備click不執行的問題