JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div>
        <ul>
            <li>Here are some things</li>
            <li>Here are some things</li>
            <li>Here are some things</li>
            <li>Here are some things</li>
        </ul></div>
        <div style="height: 200px; width: 200px; background-color: blue"></div>
        <p>
             here's some text
        </p>
    </body>
</html>

JavaScript

$(document).click(function(evt) {
    var elementClicked = evt.target;
    var xCoordinate = evt.pageX;
    var yCoordinate = evt.pageY;
    var textSelected = getSelected();
    var parentDiv = $(elementClicked.tagName).parents("div").get(0); 
    $(elementClicked.tagName).parents("div").attr("style","background-color:Green"); 
    alert('You clicked a ' + parentDiv.nodeName + ' at {' + xCoordinate + ',' + yCoordinate + '}' + ' with text = "' + textSelected + '"');
    alert('You clicked a ' + elementClicked.tagName.toLowerCase() + ' at {' + xCoordinate + ',' + yCoordinate + '}' + ' with text = "' + textSelected + '"');
    // Do work to figure out what the element was and where within it was clicked
});

function getSelected() {
    if (window.getSelection) {
        return window.getSelection();
    }
    else if (document.getSelection) {
        return document.getSelection();
    }
    else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
            return selection.text;
        }
        return false;
    }
    return false;
}