Skip to content

Commit

Permalink
Merge pull request #25 from tomhicks-bsf/master
Browse files Browse the repository at this point in the history
Allow user-specified click rejection
  • Loading branch information
s0meone committed Jan 29, 2016
2 parents d7ef974 + f7c59f0 commit 7f46092
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 55 deletions.
28 changes: 28 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,34 @@ var Main = React.createClass({
ReactDOM.render(<Main />, document.getElementById("container"));
```

### Ignoring ghost clicks

When a tap happens, the browser sends a `touchstart` and `touchend`, and then
300ms later, a `click` event. This plugin ignores the click event if it has
been immediately preceeded by a touch event (within 750ms of the last touch
event).

Occasionally, there may be times when the 750ms threshold is exceeded due to
slow rendering or garbage collection, and this causes the dreaded ghost click.

The 750ms threshold is pretty good, but sometimes you might want to override
that behaviour. You can do this by supplying your own `shouldRejectClick`
function when you inject the plugin.

The following example will simply reject all click events, which you might
want to do if you are always using `onTouchTap` and only building for touch
devices:

```js
var React = require('react'),
injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin({
shouldRejectClick: function (lastTouchEventTimestamp, clickEventTimestamp) {
return true;
}
});
```

## Build standalone version

Use the demo project and it's README instructions to build a version of React with the tap event plugin included.
108 changes: 55 additions & 53 deletions src/TapEventPlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,61 +109,63 @@ var now = (function() {
}
})();

var TapEventPlugin = {

tapMoveThreshold: tapMoveThreshold,

ignoreMouseThreshold: ignoreMouseThreshold,

eventTypes: eventTypes,

/**
* @param {string} topLevelType Record from `EventConstants`.
* @param {DOMEventTarget} topLevelTarget The listening component root node.
* @param {string} topLevelTargetID ID of `topLevelTarget`.
* @param {object} nativeEvent Native browser event.
* @return {*} An accumulation of synthetic events.
* @see {EventPluginHub.extractEvents}
*/
extractEvents: function(
topLevelType,
topLevelTarget,
topLevelTargetID,
nativeEvent,
nativeEventTarget) {

if (isTouch(topLevelType)) {
lastTouchEvent = now();
} else {
if (lastTouchEvent && (now() - lastTouchEvent) < ignoreMouseThreshold) {
return null;
}
}

if (!isStartish(topLevelType) && !isEndish(topLevelType)) {
return null;
}
var event = null;
var distance = getDistance(startCoords, nativeEvent);
if (isEndish(topLevelType) && distance < tapMoveThreshold) {
event = SyntheticUIEvent.getPooled(
eventTypes.touchTap,
function createTapEventPlugin(shouldRejectClick) {
return {

tapMoveThreshold: tapMoveThreshold,

ignoreMouseThreshold: ignoreMouseThreshold,

eventTypes: eventTypes,

/**
* @param {string} topLevelType Record from `EventConstants`.
* @param {DOMEventTarget} topLevelTarget The listening component root node.
* @param {string} topLevelTargetID ID of `topLevelTarget`.
* @param {object} nativeEvent Native browser event.
* @return {*} An accumulation of synthetic events.
* @see {EventPluginHub.extractEvents}
*/
extractEvents: function(
topLevelType,
topLevelTarget,
topLevelTargetID,
nativeEvent,
nativeEventTarget
);
}
if (isStartish(topLevelType)) {
startCoords.x = getAxisCoordOfEvent(Axis.x, nativeEvent);
startCoords.y = getAxisCoordOfEvent(Axis.y, nativeEvent);
} else if (isEndish(topLevelType)) {
startCoords.x = 0;
startCoords.y = 0;
nativeEventTarget) {

if (isTouch(topLevelType)) {
lastTouchEvent = now();
} else {
if (shouldRejectClick(lastTouchEvent, now())) {
return null;
}
}

if (!isStartish(topLevelType) && !isEndish(topLevelType)) {
return null;
}
var event = null;
var distance = getDistance(startCoords, nativeEvent);
if (isEndish(topLevelType) && distance < tapMoveThreshold) {
event = SyntheticUIEvent.getPooled(
eventTypes.touchTap,
topLevelTargetID,
nativeEvent,
nativeEventTarget
);
}
if (isStartish(topLevelType)) {
startCoords.x = getAxisCoordOfEvent(Axis.x, nativeEvent);
startCoords.y = getAxisCoordOfEvent(Axis.y, nativeEvent);
} else if (isEndish(topLevelType)) {
startCoords.x = 0;
startCoords.y = 0;
}
EventPropagators.accumulateTwoPhaseDispatches(event);
return event;
}
EventPropagators.accumulateTwoPhaseDispatches(event);
return event;
}

};
};
}

module.exports = TapEventPlugin;
module.exports = createTapEventPlugin;
5 changes: 5 additions & 0 deletions src/defaultClickRejectionStrategy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = function(lastTouchEvent, clickTimestamp) {
if (lastTouchEvent && (clickTimestamp - lastTouchEvent) < 750) {
return true;
}
};
9 changes: 7 additions & 2 deletions src/injectTapEventPlugin.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
module.exports = function injectTapEventPlugin () {
var defaultClickRejectionStrategy = require("./defaultClickRejectionStrategy");

module.exports = function injectTapEventPlugin (strategyOverrides) {
strategyOverrides = strategyOverrides || {}
var shouldRejectClick = strategyOverrides.shouldRejectClick || defaultClickRejectionStrategy;

require('react/lib/EventPluginHub').injection.injectEventPluginsByName({
"TapEventPlugin": require('./TapEventPlugin.js')
"TapEventPlugin": require('./TapEventPlugin.js')(shouldRejectClick)
});
};

0 comments on commit 7f46092

Please sign in to comment.