JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
 <title> Mouse Positions !! </title>
</head>
    
<body>
    <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>
    <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>
    <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
 </body>

</html>

CSS

#A,
#B,
#C {
  width: 100px;
  height: 100px;
  cursor: pointer;
  background: #2f2f2f;
  position: absolute;
  top: 50px;
  color: #fff;
  font: bold 15px Arial;
}

JavaScript

$(document).ready(function(e) {
  $('#A').click(function(e) {
    alert(e.pageX + ' , ' + e.pageY);
  });
  $('#B').click(function(e) {
    var posX = $(this).offset().left,
      posY = $(this).offset().top;
    alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
  });
  $('#C').click(function(e) {
    var posX = $(this).position().left,
      posY = $(this).position().top;
    alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
  });
});