mirror of
https://github.com/wu736139669/vczero.github.io.git
synced 2026-08-05 06:23:38 +00:00
add fastclick
This commit is contained in:
lh_wang
@@ -0,0 +1,531 @@
|
||||
define('lib/fastclick', function(require, exports, module) {
|
||||
function FastClick(layer) {
|
||||
'use strict';
|
||||
var oldOnClick;
|
||||
this.trackingClick = false;
|
||||
this.trackingClickStart = 0;
|
||||
this.targetElement = null;
|
||||
this.touchStartX = 0;
|
||||
this.touchStartY = 0;
|
||||
this.lastTouchIdentifier = 0;
|
||||
this.touchBoundary = 10;
|
||||
this.layer = layer;
|
||||
|
||||
if (FastClick.notNeeded(layer)) {
|
||||
return;
|
||||
}
|
||||
function bind(method, context) {
|
||||
return function() { return method.apply(context, arguments); };
|
||||
}
|
||||
if (deviceIsAndroid) {
|
||||
layer.addEventListener('mouseover', bind(this.onMouse, this), true);
|
||||
layer.addEventListener('mousedown', bind(this.onMouse, this), true);
|
||||
layer.addEventListener('mouseup', bind(this.onMouse, this), true);
|
||||
}
|
||||
|
||||
layer.addEventListener('click', bind(this.onClick, this), true);
|
||||
layer.addEventListener('touchstart', bind(this.onTouchStart, this), false);
|
||||
layer.addEventListener('touchmove', bind(this.onTouchMove, this), false);
|
||||
layer.addEventListener('touchend', bind(this.onTouchEnd, this), false);
|
||||
layer.addEventListener('touchcancel', bind(this.onTouchCancel, this), false);
|
||||
|
||||
if (!Event.prototype.stopImmediatePropagation) {
|
||||
layer.removeEventListener = function(type, callback, capture) {
|
||||
var rmv = Node.prototype.removeEventListener;
|
||||
if (type === 'click') {
|
||||
rmv.call(layer, type, callback.hijacked || callback, capture);
|
||||
} else {
|
||||
rmv.call(layer, type, callback, capture);
|
||||
}
|
||||
};
|
||||
|
||||
layer.addEventListener = function(type, callback, capture) {
|
||||
var adv = Node.prototype.addEventListener;
|
||||
if (type === 'click') {
|
||||
adv.call(layer, type, callback.hijacked || (callback.hijacked = function(event) {
|
||||
if (!event.propagationStopped) {
|
||||
callback(event);
|
||||
}
|
||||
}), capture);
|
||||
} else {
|
||||
adv.call(layer, type, callback, capture);
|
||||
}
|
||||
};
|
||||
}
|
||||
if (typeof layer.onclick === 'function') {
|
||||
oldOnClick = layer.onclick;
|
||||
layer.addEventListener('click', function(event) {
|
||||
oldOnClick(event);
|
||||
}, false);
|
||||
layer.onclick = null;
|
||||
}
|
||||
}
|
||||
|
||||
var deviceIsAndroid = navigator.userAgent.indexOf('Android') > 0;
|
||||
var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent);
|
||||
var deviceIsIOS4 = deviceIsIOS && (/OS 4_\d(_\d)?/).test(navigator.userAgent);
|
||||
var deviceIsIOSWithBadTarget = deviceIsIOS && (/OS ([6-9]|\d{2})_\d/).test(navigator.userAgent);
|
||||
FastClick.prototype.needsClick = function(target) {
|
||||
'use strict';
|
||||
switch (target.nodeName.toLowerCase()) {
|
||||
case 'button':
|
||||
case 'select':
|
||||
case 'textarea':
|
||||
if (target.disabled) {
|
||||
return true;
|
||||
}
|
||||
|
||||
break;
|
||||
case 'input':
|
||||
if ((deviceIsIOS && target.type === 'file') || target.disabled) {
|
||||
return true;
|
||||
}
|
||||
|
||||
break;
|
||||
case 'label':
|
||||
case 'video':
|
||||
return true;
|
||||
}
|
||||
|
||||
return (/\bneedsclick\b/).test(target.className);
|
||||
};
|
||||
|
||||
FastClick.prototype.needsFocus = function(target) {
|
||||
'use strict';
|
||||
switch (target.nodeName.toLowerCase()) {
|
||||
case 'textarea':
|
||||
return true;
|
||||
case 'select':
|
||||
return !deviceIsAndroid;
|
||||
case 'input':
|
||||
switch (target.type) {
|
||||
case 'button':
|
||||
case 'checkbox':
|
||||
case 'file':
|
||||
case 'image':
|
||||
case 'radio':
|
||||
case 'submit':
|
||||
return false;
|
||||
}
|
||||
|
||||
// No point in attempting to focus disabled inputs
|
||||
return !target.disabled && !target.readOnly;
|
||||
default:
|
||||
return (/\bneedsfocus\b/).test(target.className);
|
||||
}
|
||||
};
|
||||
FastClick.prototype.sendClick = function(targetElement, event) {
|
||||
'use strict';
|
||||
var clickEvent, touch;
|
||||
if (document.activeElement && document.activeElement !== targetElement) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
|
||||
touch = event.changedTouches[0];
|
||||
clickEvent = document.createEvent('MouseEvents');
|
||||
clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
|
||||
clickEvent.forwardedTouchEvent = true;
|
||||
targetElement.dispatchEvent(clickEvent);
|
||||
};
|
||||
|
||||
FastClick.prototype.determineEventType = function(targetElement) {
|
||||
'use strict';
|
||||
|
||||
if (deviceIsAndroid && targetElement.tagName.toLowerCase() === 'select') {
|
||||
return 'mousedown';
|
||||
}
|
||||
|
||||
return 'click';
|
||||
};
|
||||
|
||||
FastClick.prototype.focus = function(targetElement) {
|
||||
'use strict';
|
||||
var length;
|
||||
if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time') {
|
||||
length = targetElement.value.length;
|
||||
targetElement.setSelectionRange(length, length);
|
||||
} else {
|
||||
targetElement.focus();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Check whether the given target element is a child of a scrollable layer and if so, set a flag on it.
|
||||
*
|
||||
* @param {EventTarget|Element} targetElement
|
||||
*/
|
||||
FastClick.prototype.updateScrollParent = function(targetElement) {
|
||||
'use strict';
|
||||
var scrollParent, parentElement;
|
||||
|
||||
scrollParent = targetElement.fastClickScrollParent;
|
||||
|
||||
// Attempt to discover whether the target element is contained within a scrollable layer. Re-check if the
|
||||
// target element was moved to another parent.
|
||||
if (!scrollParent || !scrollParent.contains(targetElement)) {
|
||||
parentElement = targetElement;
|
||||
do {
|
||||
if (parentElement.scrollHeight > parentElement.offsetHeight) {
|
||||
scrollParent = parentElement;
|
||||
targetElement.fastClickScrollParent = parentElement;
|
||||
break;
|
||||
}
|
||||
|
||||
parentElement = parentElement.parentElement;
|
||||
} while (parentElement);
|
||||
}
|
||||
|
||||
// Always update the scroll top tracker if possible.
|
||||
if (scrollParent) {
|
||||
scrollParent.fastClickLastScrollTop = scrollParent.scrollTop;
|
||||
}
|
||||
};
|
||||
|
||||
FastClick.prototype.getTargetElementFromEventTarget = function(eventTarget) {
|
||||
'use strict';
|
||||
|
||||
// On some older browsers (notably Safari on iOS 4.1 - see issue #56) the event target may be a text node.
|
||||
if (eventTarget.nodeType === Node.TEXT_NODE) {
|
||||
return eventTarget.parentNode;
|
||||
}
|
||||
|
||||
return eventTarget;
|
||||
};
|
||||
FastClick.prototype.onTouchStart = function(event) {
|
||||
'use strict';
|
||||
var targetElement, touch, selection;
|
||||
|
||||
// Ignore multiple touches, otherwise pinch-to-zoom is prevented if both fingers are on the FastClick element (issue #111).
|
||||
if (event.targetTouches.length > 1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
targetElement = this.getTargetElementFromEventTarget(event.target);
|
||||
touch = event.targetTouches[0];
|
||||
|
||||
if (deviceIsIOS) {
|
||||
|
||||
// Only trusted events will deselect text on iOS (issue #49)
|
||||
selection = window.getSelection();
|
||||
if (selection.rangeCount && !selection.isCollapsed) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!deviceIsIOS4) {
|
||||
if (touch.identifier === this.lastTouchIdentifier) {
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
this.lastTouchIdentifier = touch.identifier;
|
||||
this.updateScrollParent(targetElement);
|
||||
}
|
||||
}
|
||||
|
||||
this.trackingClick = true;
|
||||
this.trackingClickStart = event.timeStamp;
|
||||
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) < 200) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Based on a touchmove event object, check whether the touch has moved past a boundary since it started.
|
||||
*
|
||||
* @param {Event} event
|
||||
* @returns {boolean}
|
||||
*/
|
||||
FastClick.prototype.touchHasMoved = function(event) {
|
||||
'use strict';
|
||||
var touch = event.changedTouches[0], boundary = this.touchBoundary;
|
||||
|
||||
if (Math.abs(touch.pageX - this.touchStartX) > boundary || Math.abs(touch.pageY - this.touchStartY) > boundary) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Update the last position.
|
||||
*
|
||||
* @param {Event} event
|
||||
* @returns {boolean}
|
||||
*/
|
||||
FastClick.prototype.onTouchMove = function(event) {
|
||||
'use strict';
|
||||
if (!this.trackingClick) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// If the touch has moved, cancel the click tracking
|
||||
if (this.targetElement !== this.getTargetElementFromEventTarget(event.target) || this.touchHasMoved(event)) {
|
||||
this.trackingClick = false;
|
||||
this.targetElement = null;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Attempt to find the labelled control for the given label element.
|
||||
*
|
||||
* @param {EventTarget|HTMLLabelElement} labelElement
|
||||
* @returns {Element|null}
|
||||
*/
|
||||
FastClick.prototype.findControl = function(labelElement) {
|
||||
'use strict';
|
||||
|
||||
// Fast path for newer browsers supporting the HTML5 control attribute
|
||||
if (labelElement.control !== undefined) {
|
||||
return labelElement.control;
|
||||
}
|
||||
|
||||
// All browsers under test that support touch events also support the HTML5 htmlFor attribute
|
||||
if (labelElement.htmlFor) {
|
||||
return document.getElementById(labelElement.htmlFor);
|
||||
}
|
||||
|
||||
// If no for attribute exists, attempt to retrieve the first labellable descendant element
|
||||
// the list of which is defined here: http://www.w3.org/TR/html5/forms.html#category-label
|
||||
return labelElement.querySelector('button, input:not([type=hidden]), keygen, meter, output, progress, select, textarea');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* On touch end, determine whether to send a click event at once.
|
||||
*
|
||||
* @param {Event} event
|
||||
* @returns {boolean}
|
||||
*/
|
||||
FastClick.prototype.onTouchEnd = function(event) {
|
||||
'use strict';
|
||||
var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement;
|
||||
|
||||
if (!this.trackingClick) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Prevent phantom clicks on fast double-tap (issue #36)
|
||||
if ((event.timeStamp - this.lastClickTime) < 200) {
|
||||
this.cancelNextClick = true;
|
||||
return true;
|
||||
}
|
||||
|
||||
// Reset to prevent wrong click cancel on input (issue #156).
|
||||
this.cancelNextClick = false;
|
||||
|
||||
this.lastClickTime = event.timeStamp;
|
||||
|
||||
trackingClickStart = this.trackingClickStart;
|
||||
this.trackingClick = false;
|
||||
this.trackingClickStart = 0;
|
||||
|
||||
// On some iOS devices, the targetElement supplied with the event is invalid if the layer
|
||||
// is performing a transition or scroll, and has to be re-detected manually. Note that
|
||||
// for this to function correctly, it must be called *after* the event target is checked!
|
||||
// See issue #57; also filed as rdar://13048589 .
|
||||
if (deviceIsIOSWithBadTarget) {
|
||||
touch = event.changedTouches[0];
|
||||
|
||||
// In certain cases arguments of elementFromPoint can be negative, so prevent setting targetElement to null
|
||||
targetElement = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset) || targetElement;
|
||||
targetElement.fastClickScrollParent = this.targetElement.fastClickScrollParent;
|
||||
}
|
||||
|
||||
targetTagName = targetElement.tagName.toLowerCase();
|
||||
if (targetTagName === 'label') {
|
||||
forElement = this.findControl(targetElement);
|
||||
if (forElement) {
|
||||
this.focus(targetElement);
|
||||
if (deviceIsAndroid) {
|
||||
return false;
|
||||
}
|
||||
|
||||
targetElement = forElement;
|
||||
}
|
||||
} else if (this.needsFocus(targetElement)) {
|
||||
|
||||
if ((event.timeStamp - trackingClickStart) > 100 || (deviceIsIOS && window.top !== window && targetTagName === 'input')) {
|
||||
this.targetElement = null;
|
||||
return false;
|
||||
}
|
||||
|
||||
this.focus(targetElement);
|
||||
this.sendClick(targetElement, event);
|
||||
|
||||
// Select elements need the event to go through on iOS 4, otherwise the selector menu won't open.
|
||||
if (!deviceIsIOS4 || targetTagName !== 'select') {
|
||||
this.targetElement = null;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if (deviceIsIOS && !deviceIsIOS4) {
|
||||
scrollParent = targetElement.fastClickScrollParent;
|
||||
if (scrollParent && scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
if (!this.needsClick(targetElement)) {
|
||||
event.preventDefault();
|
||||
this.sendClick(targetElement, event);
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* On touch cancel, stop tracking the click.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
FastClick.prototype.onTouchCancel = function() {
|
||||
'use strict';
|
||||
this.trackingClick = false;
|
||||
this.targetElement = null;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Determine mouse events which should be permitted.
|
||||
*
|
||||
* @param {Event} event
|
||||
* @returns {boolean}
|
||||
*/
|
||||
FastClick.prototype.onMouse = function(event) {
|
||||
'use strict';
|
||||
|
||||
// If a target element was never set (because a touch event was never fired) allow the event
|
||||
if (!this.targetElement) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (event.forwardedTouchEvent) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Programmatically generated events targeting a specific element should be permitted
|
||||
if (!event.cancelable) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Derive and check the target element to see whether the mouse event needs to be permitted;
|
||||
// unless explicitly enabled, prevent non-touch click events from triggering actions,
|
||||
// to prevent ghost/doubleclicks.
|
||||
if (!this.needsClick(this.targetElement) || this.cancelNextClick) {
|
||||
|
||||
// Prevent any user-added listeners declared on FastClick element from being fired.
|
||||
if (event.stopImmediatePropagation) {
|
||||
event.stopImmediatePropagation();
|
||||
} else {
|
||||
|
||||
// Part of the hack for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2)
|
||||
event.propagationStopped = true;
|
||||
}
|
||||
|
||||
// Cancel the event
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// If the mouse event is permitted, return true for the action to go through.
|
||||
return true;
|
||||
};
|
||||
FastClick.prototype.onClick = function(event) {
|
||||
'use strict';
|
||||
var permitted;
|
||||
if (this.trackingClick) {
|
||||
this.targetElement = null;
|
||||
this.trackingClick = false;
|
||||
return true;
|
||||
}
|
||||
if (event.target.type === 'submit' && event.detail === 0) {
|
||||
return true;
|
||||
}
|
||||
|
||||
permitted = this.onMouse(event);
|
||||
if (!permitted) {
|
||||
this.targetElement = null;
|
||||
}
|
||||
return permitted;
|
||||
};
|
||||
FastClick.prototype.destroy = function() {
|
||||
'use strict';
|
||||
var layer = this.layer;
|
||||
|
||||
if (deviceIsAndroid) {
|
||||
layer.removeEventListener('mouseover', this.onMouse, true);
|
||||
layer.removeEventListener('mousedown', this.onMouse, true);
|
||||
layer.removeEventListener('mouseup', this.onMouse, true);
|
||||
}
|
||||
|
||||
layer.removeEventListener('click', this.onClick, true);
|
||||
layer.removeEventListener('touchstart', this.onTouchStart, false);
|
||||
layer.removeEventListener('touchmove', this.onTouchMove, false);
|
||||
layer.removeEventListener('touchend', this.onTouchEnd, false);
|
||||
layer.removeEventListener('touchcancel', this.onTouchCancel, false);
|
||||
};
|
||||
FastClick.notNeeded = function(layer) {
|
||||
'use strict';
|
||||
var metaViewport;
|
||||
var chromeVersion;
|
||||
if (typeof window.ontouchstart === 'undefined') {
|
||||
return true;
|
||||
}
|
||||
chromeVersion = +(/Chrome\/([0-9]+)/.exec(navigator.userAgent) || [,0])[1];
|
||||
|
||||
if (chromeVersion) {
|
||||
|
||||
if (deviceIsAndroid) {
|
||||
metaViewport = document.querySelector('meta[name=viewport]');
|
||||
|
||||
if (metaViewport) {
|
||||
// Chrome on Android with user-scalable="no" doesn't need FastClick (issue #89)
|
||||
if (metaViewport.content.indexOf('user-scalable=no') !== -1) {
|
||||
return true;
|
||||
}
|
||||
// Chrome 32 and above with width=device-width or less don't need FastClick
|
||||
if (chromeVersion > 31 && window.innerWidth <= window.screen.width) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Chrome desktop doesn't need FastClick (issue #15)
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
if (layer.style.msTouchAction === 'none') {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
FastClick.attach = function(layer) {
|
||||
'use strict';
|
||||
return new FastClick(layer);
|
||||
};
|
||||
|
||||
module.exports = FastClick.attach;
|
||||
module.exports.FastClick = FastClick;
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user