JSFiddle - React, Tailwind, and code Playground

HTML

Click anywhere in the box <br />
        <div style="border:1px solid black; min-height: 100px; min-width: 100px; 
             display: inline-block;" id="parent">
            <span style="margin-top:40px; margin-left:40px; position: absolute;
                  cursor: pointer;" id="clickMe">X</span>
        </div>
        
        <br />
        <div id="result"></div>

JavaScript

$(document).ready(function()
                {
                    $("#parent").click(function(e)
                        {
                            showEvent(e);
                        }                            
                        
                    );
                }
            );
          function showEvent(e)
          {
            var props = ['offsetX','offsetY','pageX','pageY',
                      'screenX', 'screenY'];

             var result = '';
             for (var i = 0; i < props.length; i++)                           
             {
                 result += "<b>" + props[i] + "</b>:";
                 result+= e[ props[i] ] + "<br />";
             }
             $("#result").html(result);
          }