Mithril.jsでタップイベント(fastclick)を使う(Paw.js使用)

Mithril.jsとタップ

高速で、生のオブジェクトを使う感じで扱いやすいMithril.jsですが、標準だとタップ(fastclick)は使えず、onclickのみです。

タップその他のイベントを扱うコミュニティ製のコンポーネントもあるのですが、スワイプなどもサポートする関係上、妙に遅い。

なので、高速で素晴らしいPaw.js(damelon様作)というライブラリを使わせていただき、やってみました。
試してないですが、Hammer.jsなどでも同じ要領でできるのではないかと。

コード

CoffeeScriptです。

new Paw(document.body)

tapRoute = (element, isInitialized, context) ->

  routeHook = (e) ->
    `var e`
    e = e or event

    # デフォルトのイベントを抑制
    if e.preventDefault
      e.preventDefault()

    # ここにページ遷移前の処理(たとえばアニメーションなど)を入れられます

    # 相対URLの取得
    # FIXME : このままだと /path 形式のパスしか使えないので必要ならば修正
    currentTarget = e.currentTarget or e.srcElement
    href = currentTarget.getAttribute('href')
    if href[0] != '/'
      href = '/' + href

    # Mithril Router
    m.route(href)
    return

  if !isInitialized
    # tapイベントハンドラを登録
    if element.addEventListener
      element.removeEventListener('tap', routeHook)
      element.addEventListener('tap', routeHook)
    else
      element.detachEvent('ontap', routeHook)
      element.attachEvent('ontap', routeHook)

  # 追記 unload時にtapイベントハンドラを削除
  context.onunload = () ->
    if element.addEventListener
      element.removeEventListener('tap', routeHook)
    else
      element.detachEvent('tap', routeHook)

  return

 # aタグでのリンクの場合
 # configにrouteTapを指定する
 m.render(document.body, [
    m('a', {
        href: '/path/' 
        config: routeTap
        }, 
        'リンク')
 ])