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
|
<!DOCTYPE HTML>
<html>
<script src='test.js'></script>
<script src='dispatch_touch_event.js'></script>
<script>
function setup(state, classes) {
for (let c of classes) {
state[c] = {};
state[c].onTouchStart = function(event) {
state[c].touchStart = event;
};
state[c].onTouchMove = function(event) {
state[c].touchMove = event;
};
state[c].onTouchEnd = function(event) {
state[c].touchEnd = event;
};
state[c].el = document.querySelector('.' + c);
state[c].el.addEventListener('touchstart', state[c].onTouchStart, false);
state[c].el.addEventListener('touchmove', state[c].onTouchMove, false);
state[c].el.addEventListener('touchend', state[c].onTouchEnd, false);
}
}
function teardown(state) {
for (let c in state) {
state[c].el.removeEventListener('touchstart', state[c].onTouchStart, false);
state[c].el.removeEventListener('touchmove', state[c].onTouchMove, false);
state[c].el.removeEventListener('touchend', state[c].onTouchEnd, false);
}
}
function testCorrectTarget1() {
var s = {};
setup(s, ['div1', 'div2']);
dispatchTouchEvent(50, 50, 'touchstart');
teardown(s);
assert(s.div1.touchStart && s.div1.touchStart.target === s.div1.el);
assert(!s.div2.touchStart);
}
function testCorrectTarget2() {
var s = {};
setup(s, ['div1', 'div2']);
dispatchTouchEvent(50, 150, 'touchstart');
teardown(s);
assert(s.div2.touchStart && s.div2.touchStart.target === s.div2.el);
assert(!s.div1.touchStart);
}
function testAllEvents() {
var s = {};
setup(s, ['div1', 'div2']);
dispatchTouchEvent(10, 20, 'touchstart');
dispatchTouchEvent(30, 40, 'touchmove');
dispatchTouchEvent(50, 60, 'touchend');
teardown(s);
assert(s.div1.touchStart);
assert(s.div1.touchStart.target === s.div1.el);
assert(s.div1.touchStart.touches[0].clientX === 10);
assert(s.div1.touchStart.touches[0].clientY === 20);
assert(s.div1.touchMove);
assert(s.div1.touchMove.target === s.div1.el);
assert(s.div1.touchMove.touches[0].clientX === 30);
assert(s.div1.touchMove.touches[0].clientY === 40);
assert(s.div1.touchEnd);
assert(s.div1.touchEnd.target === s.div1.el);
assert(s.div1.touchEnd.touches[0].clientX === 50);
assert(s.div1.touchEnd.touches[0].clientY === 60);
}
</script>
<body>
<div style="width:100px;height:100px;" class="div1"></div>
<div style="width:100px;height:100px;" class="div2"></div>
</body>
</html>
|
