React Tap Event Helper

Home.react.js

/**
 * Home
 */

var TapEvent = new (require("../../../Modules/EventHelpers/TapEvent"))();

var Home = React.createClass({ // jshint ignore:line

	render: function() {
		return (
			<div className="home">
				<button type="button" 
					    onTouchStart={TapEvent.onTouchStart} 
					    onTouchMove={TapEvent.onTouchMove}
					    onTouchEnd={TapEvent.onTouchEnd.bind(this, this._myMenuItemClicked)}
					    onClick={TapEvent.onClick.bind(this, this._myMenuItemClicked)}>
					My Menu Item
				</button>
			</div>
		);
	},

	_myMenuItemClicked: function() {
		// Perform navigation etc..
	}
	  
});

module.exports = Home;

TapEvent.js

module.exports = function() {

	var _hasTouch = false;
	var _isTouched = false;
	var _touchStartX;
	var _touchStartY;
	var _touchTimeout;

	var _touchInvalidated = function() {
		_isTouched = false;
		clearTimeout(_touchTimeout);
	};

	var _onTouchStart = function(evt) {
		_hasTouch = true;

		var touchStart = evt.touches[0];

		_touchStartX = touchStart.pageX;
		_touchStartY = touchStart.pageY;

		// Remove the tap and move handlers if the timeout expires
		_isTouched = true;
		_touchTimeout = setTimeout(_touchInvalidated, 500);
	};

	var _onTouchMove = function(evt) {
		var touchMove = evt.touches[0];
		var moveX = touchMove.pageX;
		var moveY = touchMove.pageY;

		if (Math.abs(moveX - _touchStartX) > 10 || Math.abs(moveY - _touchStartY) > 10) {
			_touchInvalidated();
		}
	};

	var _onTouchEnd = function() {
		if(!_isTouched) {
			return;
		}

		_touchInvalidated();

		arguments[0].apply(this, Array.prototype.slice.call(arguments).slice(1));
	};

	var _onClick = function() {
		if(_hasTouch) {
			return;
		}

		arguments[0].apply(this, Array.prototype.slice.call(arguments).slice(1));
	};

 	return {
		onTouchStart: function(evt) {
			_onTouchStart(evt);
		},

		onTouchMove: function(evt) {
			_onTouchMove(evt);
		},

		onTouchEnd: function() {
			_onTouchEnd.apply(this, arguments);
		},

		onClick: function() {
			_onClick.apply(this, arguments);
		}
	};
 };