Skip to main content

Posts

Showing posts from December, 2010

Converting single-touch events to mouse events

Many times, there are various interactions that take place in a web app based on mouse movement, clicking, dragging, etc. With a mouse, this is fairly simple, as there is a single point, and events like mousedown, mouseup, and mousemove can be used to discover the state of the mouse at any given time.

On mobile browsers, however, it's a different story. Most phones support at least some kind of multi-touch, and the mousedown and mouseup events are not fired (there is, after all, no button). In addition, mousemove will only be applicable when dragging. Instead, mobile browsers dispatch touchstart, touchmove, and touchend events. Moreover, these events keep track of all touch points, not just the first or last one, and as such make handling them a bit more difficult.

For the purposes of an application that only requires tracking clicks and drags, it is more convenient to translate these touch events into mouse events without having code duplication. This can be accomplished quickly …