Reacting to a Mouse Click

A mouse click can be used to trigger an action, no matter where the mouse cursor is in the display

<!DOCTYPE html>
<!-- anywhere.html
     Display a message when the mouse button is pressed,
     no matter where it is on the screen 
     -->
<html lang = "en">
  <head>
    <title> Sense events anywhere </title>
    <meta charset = "utf-8" />
    <script type = "text/javascript"  src = "anywhere.js" >
    </script>
  </head>
  <body onmousedown = "displayIt(event);"
        onmouseup = "hideIt();">
    <p>
      <span id= "message"  
            style = "color: red; visibility: hidden;
                     position: relative;
                     font-size: 1.7em; font-style: italic;
                     font-weight: bold;">
         Please don't click here! 
      </span>
      <br /><br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br /><br />
    </p>
  </body>
</html>

// anywhere.js
//   Display a message when the mouse button is pressed,
//   no matter where it is on the screen 

// The event handler function to display the message

function displayIt(evt) {
  var dom = document.getElementById("message");
  dom.style.left = (evt.clientX - 130) + "px";
  dom.style.top = (evt.clientY - 25) + "px";
  dom.style.visibility = "visible";
}

// ****************************************************
// The event handler function to hide the message

function hideIt() {
  document.getElementById("message").style.visibility =
      "hidden";
}