vec2-touch

touch/mouse events via vec2

vec2-touch

Represent multitouch with vec2

live demo

If you desire reusable software modules, you must implement ideas that are broadly applicable. They should be based on ideas that are true in many places.

So much "front-end" stuff is just about generating HTML or CSS. But, there is nothing particularily true about html or css. It's just a tool for typesetting, and by no means the best one.

But what is true is geometry. Geometry is true everywhere. It will still be true when no body uses HTML, if that ever happens. Yet, everything on the html page is a rectangle or a point.

Call something by it's true name and you have power over it.

Html is merely theurgy, speak the right incartations and the browser spirits with appear, but say the wrong ones and the will hurt you.

But, geometry is true Rule Magic!

If you can speak the words of power, you will control that which breaths life into the browser spirits and they will be forced to do your bidding.

See also: vec2

track all touches on the page.

var touches = require('vec2-touch')
 
touches(function (touch) {
  //handle start here... 
 
  //follow touch... 
  touch.change(function (touch) {
    //handle move 
 
    if(touch.end) {
      //handle end of touch. 
 
    }
  })
  //the change listener is automatically removed when finger is lifted! 
})

Note that this pattern is kinda like a server A touch is like a stream, and your app recieves many touches, potentially in parallel!

Listen for touches - when a touch starts, the listener is called. The listener should then call touch.change(onChange) to receive updates as the touch moves.

Optionally, you may pass in an element to detect touches on, by default it will detect touches on the body itself.

Object representing a touch. This is an subclass of Vec2 with a few extra properties.

touch.x      //x coord (clientX) 
touch.y      //y coord (clientY) 
touch.force  //firmness of touch 
touch.target //element being touched 
touch.event  //DOM original dom touch event 
touch.type   //'start' 'move' or 'end' 
touch.end    //boolean - is the touch ended. 
touch.change(function () {
  //called whenever x or y changes. 
})

MIT