I create a little jQuery/Zepto “plugin” function:
$.fn.onClickOrTouch = (callback) ->
if window.ontouchend != undefined # insanely clever touch detection
this.each -> this._touchMoveCount = 0
this.on 'touchmove', ->
this._touchMoveCount++
this.on 'touchend', (e) ->
if this._touchMoveCount < 3
callback.call this, e
this._touchMoveCount = 0
this.on 'click', -> false
else
this.on 'click', callback
Then, instead of using jQuery/Zepto’s click
event…
$('a#my-link').on 'click', ->
# ...
…I register events with onClickOrTouch
:
$('a#my-link').onClickOrTouch ->
# ...
With onClickOrTouch
, events fire on touchend
, but only if the user triggered less than 3 touchmove
’s since touchstart
on the link. It’s a good threshold to avoid unintentional taps, specially when you want to scroll rather than tap.