| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width,minimum-scale=1"> |
| <title>Touch Action Test Page</title> |
| </head> |
| <body> |
| <div id="target"> |
| Events are logged when tests touch this div. |
| </div> |
| <div id="events">events: </div> |
| <div id="padding"> |
| We need some padding here so that the page is large enough to test swipe |
| and scroll actions. |
| </div> |
| <div id="bottom">This is the bottom of the page.</div> |
| <script> |
| events = document.getElementById('events'); |
| var eventTypes = ['touchstart', 'touchend', 'touchmove', 'touchcancel']; |
| var eventListener = function(evt) { |
| events.innerHTML += ' ' + evt.type; |
| }; |
| |
| var target = document.getElementById('target'); |
| for (var i = 0; i < eventTypes.length; i++) { |
| target.addEventListener(eventTypes[i], eventListener); |
| } |
| |
| var padding = document.getElementById('padding'); |
| padding.style.border = 'solid'; |
| padding.style.height = window.screen.height * 2 + 'px'; |
| padding.style.width = window.screen.width * 2 + 'px'; |
| </script> |
| </body> |
| </html> |
