2024-02-16 08:14:17 +00:00
|
|
|
<!DOCTYPE html>
|
2023-10-06 09:08:44 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Touch test</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
2024-02-21 10:24:36 +00:00
|
|
|
<body style="touch-action: none">
|
2023-10-06 09:08:44 +00:00
|
|
|
<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 = [];
|
2024-02-21 10:24:36 +00:00
|
|
|
for (const name of ["touchstart", "touchmove", "touchend"]) {
|
|
|
|
|
globalThis.addEventListener(
|
|
|
|
|
name,
|
|
|
|
|
(event) => {
|
|
|
|
|
allEvents.push({
|
|
|
|
|
type: name,
|
|
|
|
|
changedTouches: [...event.changedTouches].map((touch) => ({
|
|
|
|
|
clientX: touch.clientX,
|
|
|
|
|
clientY: touch.clientY,
|
|
|
|
|
radiusX: touch.radiusX,
|
|
|
|
|
radiusY: touch.radiusY,
|
|
|
|
|
force: touch.force,
|
|
|
|
|
})),
|
|
|
|
|
activeTouches: [...event.touches].map((touch) => ({
|
|
|
|
|
clientX: touch.clientX,
|
|
|
|
|
clientY: touch.clientY,
|
|
|
|
|
radiusX: touch.radiusX,
|
|
|
|
|
radiusY: touch.radiusY,
|
|
|
|
|
force: touch.force,
|
|
|
|
|
})),
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
true,
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
for (const name of ['pointerdown', 'pointermove', 'pointerup', 'click']) {
|
|
|
|
|
globalThis.addEventListener(
|
|
|
|
|
name,
|
|
|
|
|
(event) => {
|
|
|
|
|
allEvents.push({
|
|
|
|
|
type: name,
|
|
|
|
|
x: event.x,
|
|
|
|
|
y: event.y,
|
|
|
|
|
width: event.width,
|
|
|
|
|
height: event.height,
|
|
|
|
|
altitudeAngle: event.altitudeAngle,
|
|
|
|
|
azimuthAngle: event.azimuthAngle,
|
|
|
|
|
pressure: event.pressure,
|
|
|
|
|
pointerType: event.pointerType,
|
|
|
|
|
twist: event.twist,
|
|
|
|
|
tiltX: event.tiltX,
|
|
|
|
|
tiltY: event.tiltY,
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
true,
|
|
|
|
|
);
|
|
|
|
|
}
|
2023-10-06 09:08:44 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
