Backbone.jsでタッチイベント周りの処理
eventsの遅延評価で、イベント部分を分ける。対象メソッドは共通にしておく。メソッド内で必要になる位置関連のメソッドも用意しておいて、どちらであっても問題なく取得できるようにしておく。
タッチイベント周りと書いたけど、下記のコードはタッチで何らかの対象をドラッグできるようにする想定のコード。
class TouchView extends Backbone.View events: do -> # モバイル振り分けの処理を用意しておく if ( isMobile() ) events = { 'touchstart canvas' : '_onDragStart' 'touchmove canvas' : '_onDragMove' 'touchend canvas' : '_onDragEnd' } else events = { 'mousedown canvas' : '_onDragStart' 'mousemove canvas' : '_onDragMove' 'mouseup canvas' : '_onDragEnd' } # 共通のイベント return _.extend(events, { 'click' : '_onClick' }) initialize: -> @dragstart = false _getClientPos: (ev) -> ev = ev.originalEvent touches = ev.touches # タッチイベントの場合 if ( touches ) return { x: touches[0].clientX y: touches[0].clientY } # 通常のイベントの場合 else return { x: ev.clientX y: ev.clientY } _onDragStart: (ev) -> ev.preventDefault() @dragStart = true @dragStartPos = { x: 0 y: 0 } @dragStartEv = @_getClientPos(ev) _onDragMove: (ev) -> ev.preventDefault() if ( not @dragStart ) return dragEndPos = @_getClientPos(ev) # これが前回との差 dragDiff = { x: dragEndPos.x - @dragStartEv.x y: dragEndPos.y - @dragStartEv.y } # dragDiffなどを使って何らかの処理をする @dragStartEv = dragEndPos _onDragEnd: (ev) -> ev.preventDefault() if ( not @dragStart ) return @dragStart = false