245 lines
7.1 KiB
HTML
245 lines
7.1 KiB
HTML
<!doctype html>
|
|
<!-- Modified from rbyers.github.io/eventTest.js
|
|
|
|
Changes were to remove some elements which don't make sense in this context,
|
|
including UI to toggle events and various non-mouse, keyboard, touch events.
|
|
There were also some formatting changes. Finally, some test-friendly functions
|
|
like clearPreviousEvents() were added.
|
|
|
|
Add event handlers for all mouse, touch, and keyboard events. Log any events
|
|
seen. Intended to be queried by an autotest after input playback.
|
|
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Touch Event Test Page</title>
|
|
<script type="text/javascript">
|
|
var pageReady = false; // Used to determine whether test can run yet.
|
|
var lastEvent; // The last event seen.
|
|
var eventCount = 0; // Count of events seen.
|
|
var timeOfLastEvent; // Timestamp of when last event occurred.
|
|
var netScrollDelta = {x: 0, y: 0}; // Net scroll seen.
|
|
var clickCount = 0; // Total number of clicks seen.
|
|
var eventLog = ''; // Log of all events seen.
|
|
var preventDefaults = true; // Boolean whether to prevent default events.
|
|
|
|
|
|
// Reset previously seen events.
|
|
function clearPreviousEvents() {
|
|
lastEvent = undefined;
|
|
eventCount = 0;
|
|
timeOfLastEvent = undefined;
|
|
netScrollDelta = {x: 0, y: 0};
|
|
clickCount = 0;
|
|
eventLog = '';
|
|
pageReady = true;
|
|
}
|
|
|
|
// Add the given event and message to the running eventLog.
|
|
function logEvent(event, msg) {
|
|
eventCount += 1;
|
|
if (!msg) {
|
|
msg = '';
|
|
}
|
|
if (timeOfLastEvent && event.timeStamp) {
|
|
msg += ' timeDelta=' + round(event.timeStamp - timeOfLastEvent) + 'ms';
|
|
}
|
|
timeOfLastEvent = event.timeStamp;
|
|
lastEvent = event;
|
|
msg = event.type + ': ' + msg + '\n';
|
|
eventLog += msg;
|
|
console.log(msg);
|
|
}
|
|
|
|
// Call preventDefault() on the event if preventDefaults is set.
|
|
function preventDefault(event) {
|
|
if (preventDefaults) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
|
|
// Round the given value to 2 decimal places.
|
|
function round(val) {
|
|
return Math.round(val * 100) / 100;
|
|
}
|
|
|
|
// addEventListener with the given handler for the given event types.
|
|
function setHandlerState(events, handler) {
|
|
for (var i = 0; i < events.length; i++) {
|
|
document.addEventListener(events[i], handler);
|
|
}
|
|
};
|
|
|
|
// mouse event handler
|
|
function mouseEventHandler(event)
|
|
{
|
|
var msg = '';
|
|
if (event.type == 'click') {
|
|
clickCount += 1;
|
|
}
|
|
if (event.type == 'mousewheel') {
|
|
msg += ', wheelDelta=' + round(event.wheelDelta) +
|
|
' (' + round(event.wheelDeltaX) + ',' +
|
|
round(event.wheelDeltaY) + ')';
|
|
netScrollDelta.x += event.wheelDeltaX;
|
|
netScrollDelta.y += event.wheelDeltaY;
|
|
}
|
|
if (event.type == 'wheel') {
|
|
msg += ', deltaX=' + round(event.deltaX) + ', deltaY=' +
|
|
round(event.deltaY) + ', deltaZ=' + round(event.deltaZ);
|
|
netScrollDelta.x += event.deltaX;
|
|
netScrollDelta.y += event.deltaY;
|
|
}
|
|
if (event.type == 'mousewheel' || event.type == 'wheel') {
|
|
msg += ', deltaMode=' + (
|
|
event.deltaMode == 0 ? 'PIXEL' :
|
|
event.deltaMode == 1 ? 'LINE' :
|
|
event.deltaMode == 2 ? 'PAGE' :
|
|
event.deltaMode);
|
|
}
|
|
if (event.type.toLowerCase().indexOf('pointer') != -1) {
|
|
msg += ', pointerType=' + event.pointerType + ', pointerId=' +
|
|
event.pointerId + ', width=' + round(event.width) +
|
|
', height=' + round(event.height) + ', pressure=' +
|
|
round(event.pressure) + ', tiltX=' + round(event.tiltX) +
|
|
', tiltY=' + round(event.tiltY);
|
|
}
|
|
|
|
msg = ' client=' + round(event.clientX) + ',' + round(event.clientY) +
|
|
' screen=' + round(event.screenX) + ',' + round(event.screenY) +
|
|
' button=' + event.button + ' buttons=' + event.buttons +
|
|
' detail=' + event.detail + ' cancelable=' +
|
|
event.cancelable + msg;
|
|
|
|
preventDefault(event);
|
|
logEvent(event, msg);
|
|
}
|
|
|
|
// Helper function for touch handler.
|
|
function makeTouchList(touches, verbose) {
|
|
var touchStr = '';
|
|
for (var i = 0; i < touches.length; i++) {
|
|
var tgt = '';
|
|
if (i > 0)
|
|
touchStr += ' ';
|
|
|
|
if (verbose)
|
|
tgt = '-' + touches[i].target.id;
|
|
var id = touches[i].identifier;
|
|
if (id >= 100) {
|
|
if (!(id in touchMap)) {
|
|
touchMap[id] = nextId;
|
|
nextId++;
|
|
}
|
|
id = '#' + touchMap[id];
|
|
}
|
|
|
|
touchStr += id + tgt;
|
|
}
|
|
return touchStr;
|
|
}
|
|
|
|
activeTouchData = {};
|
|
|
|
// Touch event handler.
|
|
function touchEventHandler(event) {
|
|
var touchStr =
|
|
' touches=' + makeTouchList(event.touches, true) +
|
|
' changed=' + makeTouchList(event.changedTouches) +
|
|
' target=' + makeTouchList(event.targetTouches) +
|
|
' cancelable=' + event.cancelable;
|
|
|
|
preventDefault(event);
|
|
logEvent(event, touchStr);
|
|
|
|
for (var i = 0; i < event.changedTouches.length; i++) {
|
|
var touch = event.changedTouches[i];
|
|
|
|
if (event.type == 'touchstart') {
|
|
var touchData = {
|
|
startTime: event.timeStamp,
|
|
startX: touch.screenX,
|
|
startY: touch.screenY,
|
|
maxDist: 0,
|
|
maxMDist: 0
|
|
};
|
|
activeTouchData[touch.identifier] = touchData;
|
|
} else {
|
|
var touchData = activeTouchData[touch.identifier];
|
|
var distX = Math.abs(touch.screenX - touchData.startX);
|
|
var distY = Math.abs(touch.screenY - touchData.startY);
|
|
touchData.maxDist = Math.max(touchData.maxDist,
|
|
Math.sqrt(distX * distX + distY * distY));
|
|
touchData.maxMDist = Math.max(touchData.maxMDist, distX + distY);
|
|
if (event.type == 'touchend') {
|
|
msg = ('touch ' + touch.identifier + ' summary:' +
|
|
' dist=(' + distX + ',' + distY + ')' +
|
|
' max-dist=' + Math.round(touchData.maxDist) +
|
|
' max-manhattan-dist=' + touchData.maxMDist +
|
|
' dur=' + (Math.round(event.timeStamp - touchData.startTime)));
|
|
logEvent(event, msg);
|
|
delete activeTouchData[touch.identifier];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Key event handler.
|
|
function keyEventHandler(event) {
|
|
var msg = '';
|
|
if ('charCode' in event)
|
|
msg += ' charCode=' + event.charCode;
|
|
if ('keyCode' in event)
|
|
msg += ' keyCode=' + event.keyCode;
|
|
if ('key' in event)
|
|
msg += ' key=' + event.key;
|
|
if ('code' in event)
|
|
msg += ' code=' + event.code;
|
|
if ('location' in event) {
|
|
if (event.location == KeyboardEvent.DOM_KEY_LOCATION_LEFT)
|
|
msg += ' LOCATION_LEFT';
|
|
else if (event.location == KeyboardEvent.DOM_KEY_LOCATION_NUMPAD)
|
|
msg += ' LOCATION_NUMPAD';
|
|
else if (event.location == KeyboardEvent.DOM_KEY_LOCATION_RIGHT)
|
|
msg += ' LOCATION_RIGHT';
|
|
}
|
|
if (event.repeat)
|
|
msg += ' repeat';
|
|
if (event.isComposing)
|
|
msg += ' isComposing';
|
|
|
|
preventDefault(event);
|
|
logEvent(event, msg);
|
|
}
|
|
|
|
|
|
// On load, set handlers for mouse, touch, and key events.
|
|
function onLoad() {
|
|
setHandlerState(
|
|
['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup',
|
|
'mouseover', 'mousemove', 'mouseout', 'mouseenter', 'mouseleave',
|
|
'mousewheel', 'wheel'],
|
|
mouseEventHandler);
|
|
|
|
setHandlerState(
|
|
['dragstart', 'dragenter', 'dragleave', 'drop', 'dragend'],
|
|
mouseEventHandler);
|
|
|
|
setHandlerState(
|
|
['touchstart', 'touchmove', 'touchend', 'touchcancel'],
|
|
touchEventHandler);
|
|
|
|
setHandlerState(
|
|
['keydown', 'keyup', 'keypress'],
|
|
keyEventHandler);
|
|
|
|
pageReady = true;
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="onLoad()">
|
|
</body>
|
|
</html>
|