JavaScript學習筆記（十）移動端模擬tap事件替代click

<未完善>

問題：

移動端click會有200~300ms的延遲，而延遲響應會出現穿透，點擊會觸發非當前層的點擊事件。

1、tap模擬click事件

<button id="btn">click</button>

function tap (ele, callback) {
  var startTime = 0
  var ismove = false
  var maxTime = 200
  ele.addEventListener('touchstart', function(e) {
    startTime = Date.now()
    ismove = false
  })
  ele.addEventListener('touchmove', function(e) {
    ismove = true
  })
  ele.addEventListener('touchend', function(e) {
    if (ismove) {
      return
    }
    if (Date.now() - startTime > maxTime) {
      return
    }
    callback(e)
  })
}
function fnc(e) {
  console.log(e)
}
const btn = document.getElementById('btn')
tap(btn, fnc)

2. 模擬雙擊事件

function dbfnc(e) {
  if (dbfnc.clicked === undefined) {
    // 第一次點擊
    dbfnc.clicked = 1
    dbfnc.startTime = Date.now()
  } else if (dbfnc.clicked < 1) {
    // 第一次點擊
    dbfnc.clicked++
    dbfnc.startTime = Date.now()
  } else if (dbfnc.clicked === 1) {
    // 第二次點擊
    dbfnc.clicked = 0
    if (Date.now() - dbfnc.startTime < 500) {
      console.log('雙擊需要執行的代碼。', e)
    }
  }
}

tap(btn, dbfnc)