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)