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
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>Marionette Test</title>
</head>
<body>
<h1 id="testh1">Test Page</h1>
<button id="button1" style="position:absolute;left:0px;top:55px;" type="button" allowevents=true>button1</button>
<button id="button2" style="position:absolute;left:0px;top:355px;" type="button" allowevents=true>button2</button>
<button id="button3" style="position:absolute;left:0px;top:455px;" type="button" allowevents=true>button3</button>
<button id="button4" style="position:absolute;left:100px;top:455px;" type="button" allowevents=true>button4</button>
<button id="buttonScroll" style="position:absolute;left:100px;top:855px;" type="button" allowevents=true>buttonScroll</button>
<h2 id="hidden" style="visibility: hidden" class="linkClass">Hidden</h2>
<button id="buttonFlick" style="position:absolute;left:0px;top:255px;" type="button" allowevents=true>buttonFlick</button>
<script type="text/javascript">
let button3Timer = null;
let button4Timer = null;
//appends passed in text to the innerHTML of the event's target
function appendText(text) {
return function(evt) {
let element;
if (evt.type.includes("touch")) {
if (evt.type == "touchstart") {
element = evt.target;
}
else {
//since the target of touchstart is the target of all subsequent events, then
//changedTouches holds the current coordinates of this touch event, so we
//use these coordinates to find the element under the touch event
let touches = evt.changedTouches;
let x = touches[0].clientX;
let y = touches[0].clientY;
element = document.elementFromPoint(x,y);
}
}
//handle mouse events or contextmenu
else {
element = evt.target;
}
// eslint-disable-next-line no-unsanitized/property
element.innerHTML += text;
};
};
//use this function outside of attachListeners when you want to test sendMouseOnlyEvents on a target
function attachMouseListeners(element) {
element.addEventListener("contextmenu", appendText("-contextmenu"));
element.addEventListener("mousedown", appendText("-mousedown"));
element.addEventListener("mousemove", appendText("-mousemove"));
element.addEventListener("mouseup", appendText("-mouseup"));
element.addEventListener("click", appendText("-click"));
};
function attachListeners(id) {
let element = document.getElementById(id);
element.addEventListener("touchstart", appendText("-touchstart"));
element.addEventListener("touchmove", appendText("-touchmove"));
element.addEventListener("touchend", appendText("-touchend"));
element.addEventListener("touchcancel", appendText("-touchcancel"));
attachMouseListeners(element);
};
//for tracking time on an element
function addTimers(id, timer) {
let element = document.getElementById(id);
element.addEventListener("touchstart", function(evt) { timer = (new Date()).getTime();});
// eslint-disable-next-line no-unsanitized/property
element.addEventListener("touchend", function(evt) { timer = (new Date()).getTime() - timer; evt.target.innerHTML += "-" + timer;});
}
attachListeners("button1");
attachListeners("button2");
attachListeners("button3");
attachListeners("button4");
attachListeners("buttonScroll");
addTimers("button3");
addTimers("button4");
const buttonFlick = document.getElementById("buttonFlick");
attachMouseListeners(buttonFlick);
function createDelayed() {
let newButton = document.createElement("button");
newButton.id = "delayed";
newButton.setAttribute("style", "position:absolute;left:220px;top:455px;");
let content = document.createTextNode("delayed");
newButton.appendChild(content);
document.body.appendChild(newButton);
newButton.addEventListener("mousemove", appendText("-mousemove"));
newButton.addEventListener("mouseup", appendText("-mouseup"));
newButton.addEventListener("click", appendText("-click"));
};
window.setTimeout(createDelayed, 5000);
</script>
</body>
</html>
|
