123 lines
2.7 KiB
HTML
123 lines
2.7 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Touch test</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<style>
|
||
|
|
button {
|
||
|
|
box-sizing: border-box;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<button>Click target</button>
|
||
|
|
<script>
|
||
|
|
var allEvents = [];
|
||
|
|
globalThis.addEventListener(
|
||
|
|
"touchstart",
|
||
|
|
(event) => {
|
||
|
|
allEvents.push({
|
||
|
|
type: "touchstart",
|
||
|
|
touches: [...event.changedTouches].map((touch) => [
|
||
|
|
touch.clientX,
|
||
|
|
touch.clientY,
|
||
|
|
touch.radiusX,
|
||
|
|
touch.radiusY,
|
||
|
|
]),
|
||
|
|
});
|
||
|
|
},
|
||
|
|
true,
|
||
|
|
);
|
||
|
|
globalThis.addEventListener(
|
||
|
|
"touchmove",
|
||
|
|
(event) => {
|
||
|
|
allEvents.push({
|
||
|
|
type: "touchmove",
|
||
|
|
touches: [...event.changedTouches].map((touch) => [
|
||
|
|
touch.clientX,
|
||
|
|
touch.clientY,
|
||
|
|
touch.radiusX,
|
||
|
|
touch.radiusY,
|
||
|
|
]),
|
||
|
|
});
|
||
|
|
},
|
||
|
|
true,
|
||
|
|
);
|
||
|
|
globalThis.addEventListener(
|
||
|
|
"touchend",
|
||
|
|
(event) => {
|
||
|
|
allEvents.push({
|
||
|
|
type: "touchend",
|
||
|
|
touches: [...event.changedTouches].map((touch) => [
|
||
|
|
touch.clientX,
|
||
|
|
touch.clientY,
|
||
|
|
touch.radiusX,
|
||
|
|
touch.radiusY,
|
||
|
|
])
|
||
|
|
});
|
||
|
|
},
|
||
|
|
true,
|
||
|
|
);
|
||
|
|
globalThis.addEventListener(
|
||
|
|
"pointerdown",
|
||
|
|
(event) => {
|
||
|
|
allEvents.push({
|
||
|
|
type: "pointerdown",
|
||
|
|
x: event.x,
|
||
|
|
y: event.y,
|
||
|
|
width: event.width,
|
||
|
|
height: event.height,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
true,
|
||
|
|
);
|
||
|
|
globalThis.addEventListener(
|
||
|
|
"pointermove",
|
||
|
|
(event) => {
|
||
|
|
allEvents.push({
|
||
|
|
type: "pointermove",
|
||
|
|
x: event.x,
|
||
|
|
y: event.y,
|
||
|
|
width: event.width,
|
||
|
|
height: event.height,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
true,
|
||
|
|
);
|
||
|
|
globalThis.addEventListener(
|
||
|
|
"pointerup",
|
||
|
|
(event) => {
|
||
|
|
allEvents.push({
|
||
|
|
type: "pointerup",
|
||
|
|
x: event.x,
|
||
|
|
y: event.y,
|
||
|
|
width: event.width,
|
||
|
|
height: event.height,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
true,
|
||
|
|
);
|
||
|
|
globalThis.addEventListener(
|
||
|
|
"click",
|
||
|
|
(event) => {
|
||
|
|
allEvents.push({
|
||
|
|
type: "click",
|
||
|
|
x: event.x,
|
||
|
|
y: event.y,
|
||
|
|
width: event.width,
|
||
|
|
height: event.height,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
true,
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|