diff --git a/README.md b/README.md index 5d259f1..7838f3e 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ Touchy currently enables the use of the following events: * touchy-pinch * touchy-rotate * touchy-swipe +* touchy-tap These events are triggered by user interactions with a specific "phase" of the user's gesture passed to the event handler. A touchy-drag event, for example, will be triggered when the user first touches the bound element, when the user drags his or her finger across the screen, and when the user stops touching the screen. @@ -141,6 +142,10 @@ data: Points are JSON objects containing "x" and "y" pixel-based properties, relative to the page. Velocity is the distance / time measured in pixels and milliseconds, based on the last two ontouchmove events. +### touchy-tap + +(No phase. Tap triggers only once. No data.) + ## Overriding Default Configuration Settings Touchy configurations are stored within the bound element's jQuery data object. One may override default configurations by assigning new values to properties within the data object after the element is bound to a touchy event. @@ -179,6 +184,10 @@ As shown in the example, the settings are accessed through the camelCased name o * velocityThresh: 1 (required velocity to fire the event) * triggerOn: "touchmove" (or "touchend". By default, as soon as the velocity is reached, the event fires.) +### touchy-tap + +* requiredTouches: 1 + ## Using event delegation By default, Touchy events are **not** able to be bound on ancestors of the target elements in a typical "event delegation" design pattern. One may configure Touchy to do this, but unlike normal event delegation, it is computationally expensive. diff --git a/jquery.touchy.js b/jquery.touchy.js index 21fd041..b8d712e 100644 --- a/jquery.touchy.js +++ b/jquery.touchy.js @@ -24,12 +24,6 @@ data: {}, proxyEvents: [TouchStart, TouchMove, TouchEnd] }, - tap: { // the user taps briefly on the element as the only interaction. can interrelate with doubletap. - requiredTouches: 1, - msThreshTap: 200, - data: {}, - proxyEvents: [TouchStart, TouchEnd] - }, dbltap: { // the user taps twice within a short period of time on the element as the only interaction. requiredTouches: 1, msThreshTap: 200, @@ -38,6 +32,17 @@ proxyEvents: [TouchStart, TouchEnd] }, */ + tap: { // the user taps briefly on the element as the only interaction. can interrelate with doubletap. + preventDefault: { + start: true, + move: true, + end: true + }, + requiredTouches: 1, + msThreshTap: 200, + data: {}, + proxyEvents: ["TouchStart", "TouchMove", "TouchEnd"] + }, longpress: { // the user touches the element and hold his or her finger on the element for a specifed amount of time. preventDefault: { start: true, @@ -114,6 +119,8 @@ } }; + // Global variable to know if the current state allows to trigger tap event + var tapPossible = false; // private proxy event handlers @@ -178,6 +185,7 @@ $target.trigger('touchy-longpress', ['start', $target]); } data.timer = setTimeout($.proxy(function(){ + tapPossible = false; $target.trigger('touchy-longpress', ['end', $target]); }, this), settings.msThresh); break; @@ -204,6 +212,11 @@ "degrees": 0 }]); break; + + //////////////// TAP //////////////// + case 'tap': + tapPossible = true; + break; } } } @@ -354,6 +367,11 @@ "velocity": velocity }]); break; + + //////////////// TAP //////////////// + case 'tap': + tapPossible = false; + break; } } } @@ -525,6 +543,14 @@ "velocity":null }); break; + + //////////////// TAP //////////////// + case 'tap': + if (tapPossible) { + tapPossible = false; + $target.trigger('touchy-tap', [$target]); + } + break; } } }