components/test/data/actor/mouse_log.html

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