モバイルWebアプリケーションのための高速ボタンの作成

https://gist.github.com/kazu69/a359265211c323b13b6c

HTML

<script src="https://getfirebug.com/firebug-lite.js"></script>
<button id='button'>クリック</button>

CoffeeScript

google = google || {}
google.ui = google.ui || {}
google.ui.FastButton = google.ui.FastButton || {}
google.clickbuster = google.clickbuster || {}
 
google.ui.FastButton = (element, handler) ->
  @element = element
  @handler = handler

  element.addEventListener 'touchstart', @, false
  element.addEventListener 'click', @, false
 
google.ui.FastButton::handleEvent = (event) ->
  switch event.type
    when 'touchstart' then @onTouchStart event
    when 'touchmove' then @onTouchMove event
    when 'touchend' then @onClick event
    when 'click' then @onClick event
    
google.ui.FastButton::onTouchStart = (event) ->
  console.log 'TouchStart!'
  event.stopPropagation()
  @element.addEventListener 'touchend', @, false
  document.body.addEventListener 'touchmove', @, false
 
  @startX = event.touches[0].clientX
  @startY = event.touches[0].clientY
  
google.ui.FastButton::onTouchMove = (event) ->
  if Math.abs(event.touches[0].clientX - this.startX) > 10 or Math.abs(event.touches[0].clientY - this.startY) > 10
    @reset() 
google.ui.FastButton::onClick = (event) ->
  console.log 'Click!'
  event.stopPropagation()
  @reset()
  @handler event
  if event.type is 'touchend'
    google.clickbuster.preventGhostClick @startX, @startY
 
google.ui.FastButton::reset = ->
  @element.removeEventListener 'touchend', @, false
  document.body.removeEventListener 'touchmove', @, false
 
google.clickbuster.preventGhostClick = (x, y) ->
  google.clickbuster.coordinates.push x, y
  window.setTimeout google.clickbuster.pop, 2500
 
google.clickbuster.pop = -> google.clickbuster.coordinates.splice 0, 2
 
google.clickbuster.onClick = (event) ->
  i = 0
  while i < google.clickbuster.coordinates.length
    x = google.clickbuster.coordinates[i]
    y = google.clickbuster.coordinates[i + 1]
    if Math.abs(event.clientX - x) < 25 and Math.abs(event.clientY - y) < 25
      event.stopPropagation()
      event.preventDefault()
    i += 2
    
document.addEventListener 'click',...