common/src/web/mouse_interaction.html

<html>
  <head>
    <title>BasicMouseInterfaceTest</title>

    <style>
      div.solidborder { border-style:solid; border-width:1px; margin: 10px;}
      #draggable { width: 60px; height: 60px; padding: 0.5em; margin: 10px; }
      #droppable { width: 75px; height: 75px; padding: 0.5em; margin: 10px; }
    </style>

  <link type="text/css" href="https://selenium.dev/selenium/web/css/ui-lightness/jquery-ui-1.12.1.min.css" rel="stylesheet" />
  <script type="text/javascript" src="https://selenium.dev/selenium/web/js/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="https://selenium.dev/selenium/web/js/jquery-ui-1.12.1.min.js"></script>
  <script type="text/javascript">
    jQuery(document).ready(function(){
        $('#mouse-tracker').mousemove(function(e){
          xPos = e.pageX - this.offsetLeft;
          yPos = e.pageY - this.offsetTop;
          $('#relative-location').html(xPos + ', ' + yPos);
          });
        })

</script>
  <script type="text/javascript">
    function clickStatus(message) {
      document.getElementById('click-status').innerHTML = message;
    }
    function moveStatus(message) {
      document.getElementById('move-status').innerHTML = message;
    }
    function dropStatus(message) {
        document.getElementById('drop-status').innerHTML = message;
    }
    function relativeStatus(message) {
        document.getElementById('relative-location').innerHTML = message;
    }
    function absoluteStatus(message) {
        document.getElementById('absolute-location').innerHTML = message;
    }
    function tellPos(p){
        document.getElementById('absolute-location').innerHTML = p.pageX + ', ' + p.pageY;
    }
    function clearAbsolute(p){
        document.getElementById('absolute-location').innerHTML = '';
    }
    addEventListener('mousemove', tellPos, false);
    document.documentElement.addEventListener('mouseleave', clearAbsolute, false);
  </script>
  <script type="text/javascript">
    $(function () {
      $("#draggable").draggable();
      $("#droppable").droppable({
        drop: function (event, ui) { dropStatus("dropped") }
      });
    });
  </script>

  </head>
  <body>
  <h2>Mouse Clicks</h2>

  <p><a href="resultPage.html" id="click">Click for Results Page</a></p>

  <div>
   <input type="text" id="clickable"
    onfocus="clickStatus('focused')"
    oncontextmenu="clickStatus('context-clicked')"
    ondblclick="clickStatus('double-clicked')"
    placeholder="Clickable"/>&nbsp;&nbsp;

    <strong id="click-status">&nbsp;</strong>
  </div>

  <h2>Drag & Drop</h2>

  <strong id="drop-status">&nbsp;</strong>
  <div id="draggable" class="ui-widget-content">Draggable</div>

  <div id="droppable" class="ui-widget-header">Droppable</div>

  <h2>Mouse Position</h2>

  <div>
  <input type="button" id="hover" onmouseleave="moveStatus('')" onmouseover="moveStatus('hovered')" value="Hoverable"/>
  <strong id="move-status">&nbsp</strong>
  </div>

  <p><strong>Absolute Location: <span id="absolute-location" onmouseleave="absoluteStatus('')"></span></strong></p>
  <p><strong>Relative Location in Box: <span id="relative-location"></span></strong></p>
  <div id="mouse-tracker" onmouseleave="relativeStatus('')" class="solidborder" style="position: absolute; height: 200px; width: 200px;">
    Move mouse here.
  </div>
  <div id="bottom" style="margin-top: 230px;"></div>

  <script>
    function describe(el) {
      return `<${el.tagName.toLowerCase()} id="${el.id}">${el.innerText}</${el.tagName.toLowerCase()}>`;
    }
    window.addEventListener('mouseover', e => {
      document.getElementById('bottom').innerText = `Mouse over (${e.x}, ${e.y}) ${describe(e.target)}`
    })
    window.addEventListener('click', e => {
      document.getElementById('bottom').innerText = `Clicked at (${e.x}, ${e.y}) ${describe(e.target)}`
    })
  </script>
  </body>
</html>