Mouse And Touch Events

Consolidates mouse and touch events. Touch objects persist across a touch, from touchstart until end/cancel. When a touch starts, it will traverse down from the innermost target, until it finds a node that responds to ontouchstart. Unless the touch is explicitly redirected, the touch will call ontouchmove and ontouchend / ontouchcancel on the responder when appropriate.

tag DraggableItem
# called when a touch starts
def ontouchstart touch
flag 'dragging'
# called when touch moves - same touch object
def ontouchmove touch
# move the node with touch
css top: touch.dy, left: touch.dx
# called when touch ends
def ontouchend touch
unflag 'dragging'
# called if touch is cancelled
def ontouchcancel touch
unflag 'dragging'

ontouchmove, ontouchend, and ontouchcancel do not bubble like regular events. The element on which ontouchstart was called will capture the touch, and all future events (move,end,cancel) will be called on that element.

  • Explain what separate touch from regular events

Even though touch-handlers are declared the same way as regular event handlers,



Extend the touch with a plugin / gesture. All events (touchstart,move etc) for the touch will be triggered on the plugins in the order they are added.



Horizontal position of touch


Vertical position of touch


The distance the touch has moved horizontally


The distance the touch has moved vertically


The absolute distance the touch has moved from starting position


Button pressed in this touch. Native touches defaults to left-click