mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
fix(@vant/touch-emulator): add SSR support (#8767)
This commit is contained in:
Amumu
chenjiahan
parent
eeac061682
commit
35683a0d05
@ -4,194 +4,199 @@
|
||||
* Source：https://github.com/hammerjs/touchemulator
|
||||
*/
|
||||
|
||||
var eventTarget;
|
||||
var supportTouch = 'ontouchstart' in window;
|
||||
(function () {
|
||||
if (typeof window === 'undefined') {
|
||||
return;
|
||||
}
|
||||
var eventTarget;
|
||||
var supportTouch = 'ontouchstart' in window;
|
||||
|
||||
// polyfills
|
||||
if (!document.createTouch) {
|
||||
document.createTouch = function(
|
||||
view,
|
||||
target,
|
||||
identifier,
|
||||
pageX,
|
||||
pageY,
|
||||
screenX,
|
||||
screenY
|
||||
) {
|
||||
// auto set
|
||||
return new Touch(
|
||||
// polyfills
|
||||
if (!document.createTouch) {
|
||||
document.createTouch = function (
|
||||
view,
|
||||
target,
|
||||
identifier,
|
||||
{
|
||||
pageX: pageX,
|
||||
pageY: pageY,
|
||||
screenX: screenX,
|
||||
screenY: screenY,
|
||||
clientX: pageX - window.pageXOffset,
|
||||
clientY: pageY - window.pageYOffset,
|
||||
},
|
||||
0,
|
||||
0
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
if (!document.createTouchList) {
|
||||
document.createTouchList = function() {
|
||||
var touchList = TouchList();
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
touchList[i] = arguments[i];
|
||||
}
|
||||
touchList.length = arguments.length;
|
||||
return touchList;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* create an touch point
|
||||
* @constructor
|
||||
* @param target
|
||||
* @param identifier
|
||||
* @param pos
|
||||
* @param deltaX
|
||||
* @param deltaY
|
||||
* @returns {Object} touchPoint
|
||||
*/
|
||||
|
||||
var Touch = function Touch(target, identifier, pos, deltaX, deltaY) {
|
||||
deltaX = deltaX || 0;
|
||||
deltaY = deltaY || 0;
|
||||
|
||||
this.identifier = identifier;
|
||||
this.target = target;
|
||||
this.clientX = pos.clientX + deltaX;
|
||||
this.clientY = pos.clientY + deltaY;
|
||||
this.screenX = pos.screenX + deltaX;
|
||||
this.screenY = pos.screenY + deltaY;
|
||||
this.pageX = pos.pageX + deltaX;
|
||||
this.pageY = pos.pageY + deltaY;
|
||||
};
|
||||
|
||||
/**
|
||||
* create empty touchlist with the methods
|
||||
* @constructor
|
||||
* @returns touchList
|
||||
*/
|
||||
function TouchList() {
|
||||
var touchList = [];
|
||||
|
||||
touchList['item'] = function(index) {
|
||||
return this[index] || null;
|
||||
};
|
||||
|
||||
// specified by Mozilla
|
||||
touchList['identifiedTouch'] = function(id) {
|
||||
return this[id + 1] || null;
|
||||
};
|
||||
|
||||
return touchList;
|
||||
}
|
||||
|
||||
/**
|
||||
* only trigger touches when the left mousebutton has been pressed
|
||||
* @param touchType
|
||||
* @returns {Function}
|
||||
*/
|
||||
|
||||
var initiated = false;
|
||||
function onMouse(touchType) {
|
||||
return function(ev) {
|
||||
// prevent mouse events
|
||||
|
||||
if (ev.type === 'mousedown') {
|
||||
initiated = true;
|
||||
}
|
||||
|
||||
if (ev.type === 'mouseup') {
|
||||
initiated = false;
|
||||
}
|
||||
|
||||
if (ev.type === 'mousemove' && !initiated) {
|
||||
return;
|
||||
}
|
||||
|
||||
// The EventTarget on which the touch point started when it was first placed on the surface,
|
||||
// even if the touch point has since moved outside the interactive area of that element.
|
||||
// also, when the target doesnt exist anymore, we update it
|
||||
if (
|
||||
ev.type === 'mousedown' ||
|
||||
!eventTarget ||
|
||||
(eventTarget && !eventTarget.dispatchEvent)
|
||||
pageX,
|
||||
pageY,
|
||||
screenX,
|
||||
screenY
|
||||
) {
|
||||
eventTarget = ev.target;
|
||||
}
|
||||
|
||||
triggerTouch(touchType, ev);
|
||||
|
||||
// reset
|
||||
if (ev.type === 'mouseup') {
|
||||
eventTarget = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* trigger a touch event
|
||||
* @param eventName
|
||||
* @param mouseEv
|
||||
*/
|
||||
function triggerTouch(eventName, mouseEv) {
|
||||
var touchEvent = document.createEvent('Event');
|
||||
touchEvent.initEvent(eventName, true, true);
|
||||
|
||||
touchEvent.altKey = mouseEv.altKey;
|
||||
touchEvent.ctrlKey = mouseEv.ctrlKey;
|
||||
touchEvent.metaKey = mouseEv.metaKey;
|
||||
touchEvent.shiftKey = mouseEv.shiftKey;
|
||||
|
||||
touchEvent.touches = getActiveTouches(mouseEv);
|
||||
touchEvent.targetTouches = getActiveTouches(mouseEv);
|
||||
touchEvent.changedTouches = createTouchList(mouseEv);
|
||||
|
||||
eventTarget.dispatchEvent(touchEvent);
|
||||
}
|
||||
|
||||
/**
|
||||
* create a touchList based on the mouse event
|
||||
* @param mouseEv
|
||||
* @returns {TouchList}
|
||||
*/
|
||||
function createTouchList(mouseEv) {
|
||||
var touchList = TouchList();
|
||||
touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0));
|
||||
return touchList;
|
||||
}
|
||||
|
||||
/**
|
||||
* receive all active touches
|
||||
* @param mouseEv
|
||||
* @returns {TouchList}
|
||||
*/
|
||||
function getActiveTouches(mouseEv) {
|
||||
// empty list
|
||||
if (mouseEv.type === 'mouseup') {
|
||||
return TouchList();
|
||||
// auto set
|
||||
return new Touch(
|
||||
target,
|
||||
identifier,
|
||||
{
|
||||
pageX: pageX,
|
||||
pageY: pageY,
|
||||
screenX: screenX,
|
||||
screenY: screenY,
|
||||
clientX: pageX - window.pageXOffset,
|
||||
clientY: pageY - window.pageYOffset,
|
||||
},
|
||||
0,
|
||||
0
|
||||
);
|
||||
};
|
||||
}
|
||||
return createTouchList(mouseEv);
|
||||
}
|
||||
|
||||
/**
|
||||
* TouchEmulator initializer
|
||||
*/
|
||||
function TouchEmulator() {
|
||||
window.addEventListener('mousedown', onMouse('touchstart'), true);
|
||||
window.addEventListener('mousemove', onMouse('touchmove'), true);
|
||||
window.addEventListener('mouseup', onMouse('touchend'), true);
|
||||
}
|
||||
if (!document.createTouchList) {
|
||||
document.createTouchList = function () {
|
||||
var touchList = TouchList();
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
touchList[i] = arguments[i];
|
||||
}
|
||||
touchList.length = arguments.length;
|
||||
return touchList;
|
||||
};
|
||||
}
|
||||
|
||||
// start distance when entering the multitouch mode
|
||||
TouchEmulator['multiTouchOffset'] = 75;
|
||||
/**
|
||||
* create an touch point
|
||||
* @constructor
|
||||
* @param target
|
||||
* @param identifier
|
||||
* @param pos
|
||||
* @param deltaX
|
||||
* @param deltaY
|
||||
* @returns {Object} touchPoint
|
||||
*/
|
||||
|
||||
if (!supportTouch) {
|
||||
new TouchEmulator();
|
||||
}
|
||||
var Touch = function Touch(target, identifier, pos, deltaX, deltaY) {
|
||||
deltaX = deltaX || 0;
|
||||
deltaY = deltaY || 0;
|
||||
|
||||
this.identifier = identifier;
|
||||
this.target = target;
|
||||
this.clientX = pos.clientX + deltaX;
|
||||
this.clientY = pos.clientY + deltaY;
|
||||
this.screenX = pos.screenX + deltaX;
|
||||
this.screenY = pos.screenY + deltaY;
|
||||
this.pageX = pos.pageX + deltaX;
|
||||
this.pageY = pos.pageY + deltaY;
|
||||
};
|
||||
|
||||
/**
|
||||
* create empty touchlist with the methods
|
||||
* @constructor
|
||||
* @returns touchList
|
||||
*/
|
||||
function TouchList() {
|
||||
var touchList = [];
|
||||
|
||||
touchList['item'] = function (index) {
|
||||
return this[index] || null;
|
||||
};
|
||||
|
||||
// specified by Mozilla
|
||||
touchList['identifiedTouch'] = function (id) {
|
||||
return this[id + 1] || null;
|
||||
};
|
||||
|
||||
return touchList;
|
||||
}
|
||||
|
||||
/**
|
||||
* only trigger touches when the left mousebutton has been pressed
|
||||
* @param touchType
|
||||
* @returns {Function}
|
||||
*/
|
||||
|
||||
var initiated = false;
|
||||
function onMouse(touchType) {
|
||||
return function (ev) {
|
||||
// prevent mouse events
|
||||
|
||||
if (ev.type === 'mousedown') {
|
||||
initiated = true;
|
||||
}
|
||||
|
||||
if (ev.type === 'mouseup') {
|
||||
initiated = false;
|
||||
}
|
||||
|
||||
if (ev.type === 'mousemove' && !initiated) {
|
||||
return;
|
||||
}
|
||||
|
||||
// The EventTarget on which the touch point started when it was first placed on the surface,
|
||||
// even if the touch point has since moved outside the interactive area of that element.
|
||||
// also, when the target doesnt exist anymore, we update it
|
||||
if (
|
||||
ev.type === 'mousedown' ||
|
||||
!eventTarget ||
|
||||
(eventTarget && !eventTarget.dispatchEvent)
|
||||
) {
|
||||
eventTarget = ev.target;
|
||||
}
|
||||
|
||||
triggerTouch(touchType, ev);
|
||||
|
||||
// reset
|
||||
if (ev.type === 'mouseup') {
|
||||
eventTarget = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* trigger a touch event
|
||||
* @param eventName
|
||||
* @param mouseEv
|
||||
*/
|
||||
function triggerTouch(eventName, mouseEv) {
|
||||
var touchEvent = document.createEvent('Event');
|
||||
touchEvent.initEvent(eventName, true, true);
|
||||
|
||||
touchEvent.altKey = mouseEv.altKey;
|
||||
touchEvent.ctrlKey = mouseEv.ctrlKey;
|
||||
touchEvent.metaKey = mouseEv.metaKey;
|
||||
touchEvent.shiftKey = mouseEv.shiftKey;
|
||||
|
||||
touchEvent.touches = getActiveTouches(mouseEv);
|
||||
touchEvent.targetTouches = getActiveTouches(mouseEv);
|
||||
touchEvent.changedTouches = createTouchList(mouseEv);
|
||||
|
||||
eventTarget.dispatchEvent(touchEvent);
|
||||
}
|
||||
|
||||
/**
|
||||
* create a touchList based on the mouse event
|
||||
* @param mouseEv
|
||||
* @returns {TouchList}
|
||||
*/
|
||||
function createTouchList(mouseEv) {
|
||||
var touchList = TouchList();
|
||||
touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0));
|
||||
return touchList;
|
||||
}
|
||||
|
||||
/**
|
||||
* receive all active touches
|
||||
* @param mouseEv
|
||||
* @returns {TouchList}
|
||||
*/
|
||||
function getActiveTouches(mouseEv) {
|
||||
// empty list
|
||||
if (mouseEv.type === 'mouseup') {
|
||||
return TouchList();
|
||||
}
|
||||
return createTouchList(mouseEv);
|
||||
}
|
||||
|
||||
/**
|
||||
* TouchEmulator initializer
|
||||
*/
|
||||
function TouchEmulator() {
|
||||
window.addEventListener('mousedown', onMouse('touchstart'), true);
|
||||
window.addEventListener('mousemove', onMouse('touchmove'), true);
|
||||
window.addEventListener('mouseup', onMouse('touchend'), true);
|
||||
}
|
||||
|
||||
// start distance when entering the multitouch mode
|
||||
TouchEmulator['multiTouchOffset'] = 75;
|
||||
|
||||
if (!supportTouch) {
|
||||
new TouchEmulator();
|
||||
}
|
||||
})();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user