| <!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> |