| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0"> |
| <style> |
| .target { |
| width: 100px; |
| height: 100px; |
| background-color: dodgerblue; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="target" id="first" aria-label="first"></div> |
| <p>Line Break</p> |
| <div class="target" id="second" aria-label="second"></div> |
| <div class="target" id="offscreen" aria-label="offscreen" style="position:relative; top:200vh"></div> |
| </body> |
| <script> |
| let event_log = []; |
| |
| // Log all mouse events in the format: Event[Element#ID] |
| const log_handler = |
| e => event_log.push(`${e.type}[${e.target.tagName}#${e.target.id}]`); |
| const targets = document.querySelectorAll('.target'); |
| for (let t of targets) { |
| t.addEventListener('click', log_handler); |
| t.addEventListener('mousedown', log_handler); |
| t.addEventListener('mousemove', log_handler); |
| t.addEventListener('mouseup', log_handler); |
| t.addEventListener('mouseenter', log_handler); |
| t.addEventListener('mouseleave', log_handler); |
| } |
| </script> |
| </html> |
