Update fastclick.js

The value of lastClickTime only gets updated in onTouchEnd, after the value of lastClickTime is already compared to touchEndTime.

The value of lastClickTime is originally based on the event.timeStamp. When the event.timeStamp comes through as negative, the new value of touchStartTime can no longer be validly compared to the timeStamp, and the function will (often) return before lastClickTime can get updated. The same issue will manifest, until after the value of touchEndTime exceeds the original value of lastClickTime.

Setting lastClickTime to 0 when switching over to get a value based on getTime will help to avoid this. When switching over to the non-event.timeStamp value, lastClickTime should only be set to 0 once. All time comparisons from then on out should be made against a point in time, obtained when switching over, and compare milliseconds since that time.

This work was based on a pull request from @lasselaakkonen and is a fix to issue 549.
ftlabs#550
ftlabs#549

Author: Saintless

lib/fastclick.js

@@ -102,6 +102,27 @@
 		 */
 		this.tapTimeout = options.tapTimeout || 700;
 
+		/**
+		 * The check for whether to track touch event start from event.timeStamp (default) or current time (to handle negative timestamp issue)
+		 *
+		 * @type boolean
+		 */
+		this.isUsingEventTimeStamp = true;
+
+		/**
+		 * The last cick event time stamp
+		 *
+		 * @type number
+		 */
+		this.lastClickTime = 0;
+
+		/**
+		 * The base time to use for comparison, when not tracking touch by event.timeStamp
+		 *
+		 * @type number
+		 */
+		this.nonEventTrackingTimeBase = null;
+
 		if (FastClick.notNeeded(layer)) {
 			return;
 		}
@@ -389,7 +410,21 @@
 	 * @returns {boolean}
 	 */
 	FastClick.prototype.onTouchStart = function(event) {
-		var targetElement, touch, selection;
+		var targetElement, touch, selection, touchTimeStamp;
+
+		if (this.isUsingEventTimeStamp && event.timeStamp > -1) {
+			touchTimeStamp = event.timeStamp;
+		} else {
+			if (this.isUsingEventTimeStamp) {
+				// Set the base time minus twice the tap delay, to avoid the user seeing a non-response this first time through.
+				// This would occur when comparing touchTimeStamp - lastClickTime, which would be roughly 0, and expecting it not to be < this.tapDelay.
+				this.nonEventTrackingTimeBase = ((new Date()).getTime() - (this.tapDelay * 2));
+				this.lastClickTime = 0;
+				this.isUsingEventTimeStamp = false;
+			}
+
+			touchTimeStamp = ((new Date()).getTime() - this.nonEventTrackingTimeBase);
+		}
 
 		// Ignore multiple touches, otherwise pinch-to-zoom is prevented if both fingers are on the FastClick element (issue #111).
 		if (event.targetTouches.length > 1) {
@@ -435,14 +470,14 @@
 		}
 
 		this.trackingClick = true;
-		this.trackingClickStart = event.timeStamp;
+		this.trackingClickStart = touchTimeStamp;
 		this.targetElement = targetElement;
 
 		this.touchStartX = touch.pageX;
 		this.touchStartY = touch.pageY;
 
 		// Prevent phantom clicks on fast double-tap (issue #36)
-		if ((event.timeStamp - this.lastClickTime) < this.tapDelay) {
+		if ((touchTimeStamp - this.lastClickTime) < this.tapDelay) {
 			event.preventDefault();
 		}
 
@@ -519,26 +554,34 @@
 	 * @returns {boolean}
 	 */
 	FastClick.prototype.onTouchEnd = function(event) {
-		var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement;
+		var forElement, trackingClickStart, targetTagName, scrollParent, touch, touchEndTime, targetElement = this.targetElement;
+
+		if (this.isUsingEventTimeStamp) {
+			touchEndTime = event.timeStamp;
+		} else {
+			// iOS 11.3+ and Safari 11.1+ can return negative event.timeStamp values after resuming.
+			// https://github.com/ftlabs/fastclick/issues/549
+			touchEndTime = ((new Date()).getTime() - this.nonEventTrackingTimeBase)
+		}
 
 		if (!this.trackingClick) {
 			return true;
 		}
 
 		// Prevent phantom clicks on fast double-tap (issue #36)
-		if ((event.timeStamp - this.lastClickTime) < this.tapDelay) {
+		if ((touchEndTime - this.lastClickTime) < this.tapDelay) {
 			this.cancelNextClick = true;
 			return true;
 		}
 
-		if ((event.timeStamp - this.trackingClickStart) > this.tapTimeout) {
+		if ((touchEndTime - this.trackingClickStart) > this.tapTimeout) {
 			return true;
 		}
 
 		// Reset to prevent wrong click cancel on input (issue #156).
 		this.cancelNextClick = false;
 
-		this.lastClickTime = event.timeStamp;
+		this.lastClickTime = touchEndTime;
 
 		trackingClickStart = this.trackingClickStart;
 		this.trackingClick = false;
@@ -571,7 +614,7 @@
 
 			// Case 1: If the touch started a while ago (best guess is 100ms based on tests for issue #36) then focus will be triggered anyway. Return early and unset the target element reference so that the subsequent click will be allowed through.
 			// Case 2: Without this exception for input elements tapped when the document is contained in an iframe, then any inputted text won't be visible even though the value attribute is updated as the user types (issue #37).
-			if ((event.timeStamp - trackingClickStart) > 100 || (deviceIsIOS && window.top !== window && targetTagName === 'input')) {
+			if ((touchEndTime - trackingClickStart) > 100 || (deviceIsIOS && window.top !== window && targetTagName === 'input')) {
 				this.targetElement = null;
 				return false;
 			}