Fork me on GitHub

如何模拟移动端触摸事件

一直不理解为什么 vant-ui 的 pc 端文档右侧 demo 可以响应 touch 事件,比如它的轮播图页面,源码上不是监听的 touch 事件吗?为什么 pc 端上却可以滑动,什么鬼???🧐 今天终于找到了他们封装的一些方法,我觉得这对我挺有用的,这里记录一下,源码来自于 https://github.com/youzan/vant-doc/blob/master/helper/touch-simulator.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
/**
* 模拟移动端 touch 事件
*/

var eventTarget

// polyfills
if (!document.createTouch) {
document.createTouch = function(view, target, identifier, pageX, pageY, screenX, screenY) {
// 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
)
}
}

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
}

/**
* Simple trick to fake touch event support
* this is enough for most libraries like Modernizr and Hammer
*/
function fakeTouchSupport() {
var objs = [window, document.documentElement]
var props = ['ontouchstart', 'ontouchmove', 'ontouchcancel', 'ontouchend']

for (var o = 0; o < objs.length; o++) {
for (var p = 0; p < props.length; p++) {
if (objs[o] && objs[o][props[p]] === undefined) {
objs[o][props[p]] = null
}
}
}
}

/**
* only trigger touches when the left mousebutton has been pressed
* @param touchType
* @returns {Function}
*/
function onMouse(touchType) {
return function(ev) {
// prevent mouse events

if (ev.which !== 1) {
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() {
fakeTouchSupport()

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

new TouchEmulator()

直接引入该文件,pc 端就可以响应移动端的 touchstarttouchmovetouchend 事件了 ✨。