Offset Mouse Position Click

by Fatih Demir

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<html>

  <head>
    <title>Mouse Position</title>
  </head>

  <body>
      <h1>
      Offset Mouse Position Click
      </h1>
  </body>

</html>

CSS

body {
    background-color: #94719A;
    background-image: linear-gradient(90deg,#94719A, #3AC5C9);
    display:flex;
    align-items:middle;
    justify-content:center;
}

h1 {
  color:#fff;
  font-family:Arial;
  font-size:20px;
}

JavaScript

$("html").on("click", function(e) {
   var posX = $(this).position().left,
     posY = $(this).position().top;
   $("h1").text((e.pageX - posX) + ' , ' + (e.pageY - posY));
 });