A highly configurable touch event library
(still in early development)
For what I've been working on I needed an abstraction for reasoning about and dealing with touch events.
If you want to do something on
touchhold for example. There is no such thing natively. There's just
touchend (and a couple others for determining how the touch ended).
In order to let your app respond to a
hold event you're really wanting to listen for an event that doesn't exist.
I started with Hammer.js, a very nice, and far more mature touch library than this.
But, ultimately it didn't fit my needs because I wanted something that would let me very selectively
preventDefault on events to either allow or disallow normal browser scrolling based on rules and conditions or even the direction of the first
touchmove event. There may be a way to do that with Hammer.js but I didn't find one.
I also wanted to be able to handle multiple individual touches individually if I so chose.
So I started modeling touches with... Model code. Specifically statey as it turns out intelligently evented derived properties are very useful for efficiently modeling user behavior.
Unfortunately, in order to give this level of control I've ended up with an API that's a bit trickier to wrap your mind around.
You create a single touch listener that gets called with each touch event (real or similated, like hold) and gives your callback two arguments:
This TouchModel contains all the information it has about that whole touch up to that point. So, if you initiate a touch, move it a bit, then lift it. At each point along the way that same event handlers is being called, with increasingly more information added to the touch model it gets called with.
var TouchListener = require'fingertips';var listener = thisel// do stuff here// for example prevent sideways native scrolling, but allow native up and down scrollingif touchfirstAxis === 'x' && !modelsorting// on hold `e` won't existif e epreventDefault;return;// something elseif touchx > 75// do somethingreturn;// some other conditionif touchdone// touch event is overmyappkaboom;return;;
For a full reference of what you can learn from the touch model. See the
derived properties in the
Currently only structured for use with Browserify/CommonJS. Install from npm.
npm i fingertips
Written by @HenrikJoreteg, still rough, use with caution.