FastClick簡單實現

segmentfault.com/a/119000002361721...

  // 業務程式碼
  var $test = document.getElementById('test')
  $test.addEventListener('click', function () {
    console.log('1 click')
  })

  // FastClick簡單實現
  var targetElement = null
  document.body.addEventListener('touchstart', function () {
    // 關鍵點1：記錄點選的元素
    targetElement = event.target
  })
  document.body.addEventListener('touchend', function (event) {
    // 關鍵點2：阻止預設事件（遮蔽之後的click事件）
    event.preventDefault()
    var touch = event.changedTouches[0]
    // 關鍵點3：合成click事件，並新增可跟蹤屬性forwardedTouchEvent
    var clickEvent = document.createEvent('MouseEvents')
    clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null)
    clickEvent.forwardedTouchEvent = true // 自定義的
    targetElement.dispatchEvent(clickEvent)
  })

本作品採用《CC 協議》，轉載必須註明作者和本文連結