Retrieve the exact X/Y values of a <li> no matter where the mouse is clicked using Typescript

Question

I'd really like some help on this...I'm blocked!

OK, this is a simple easy question here but I'm missing one key component.

This is my fiddle whereby I can "find" the item when I click on it but that's about it.

http://jsfiddle.net/pborregg/w6pbfuae/1/

Here's the JS:

function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}

var ul = document.getElementsByClassName('commentlist')[0];
ul.onclick = function(event) {
  var target = getEventTarget(event);
  alert(target.innerHTML);
};

Here's the HTML exactly as I have it in my app:

<pretty-scroll>
  <ul class='commentlist'>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</pretty-scroll>

This is the Stackoverflow question that got me going on this:

Get Clicked <li> from <ul onclick>

What I need, is the CENTER VALUE for the position of the mouse WHEN it's Clicked on.

In the image below, you'll see the word, "ACCEPTED". When I click on that, all I need is the OUTER MOST left X/Y position of the li element.

There can be 'n' number of comments per record and the only place you can ever click on a comment will be where that word, "ACCEPTED" is. NOTE: Accepted is a test word and it could be a sentence or just a simple word.

What I'm trying to get is the MIDDLE POINT of each li element. That's it. The good news, on the page, where I want my modal to appears starts at: transform: translate(40px, 120px); The next li is EXACTLY 125px DOWN on the Y-Axis and so on for each subsequent li.

Based on varying viewport sizes, laptops, desktops, large monitors, small, etc... how can I pinpoint the EXACT position? (basically, dead LEFT center of the li element). The LI heights are all the same: Let's use 100px for example: 50px therefore is DEAD CENTER.

Bad News: I cannot TOUCH the existing code and can only use the event that I've passed into my .ts file like so:

public setModalLocation(xpos: any, ypos: any): void {

  console.log("This X:", xpos);
  console.log("This Y:", ypos);

  //base modal location for first comment(x40,y120)
  const ul = document.getElementsByClassName('commentlist')[0] as HTMLElement;

  let srcEl;
  let tarEl;
  let e = window.event;
  srcEl = e.srcElement;
  tarEl = e.target;

  console.log("Target: ", tarEl);
  console.log("SrcElement: ", srcEl);

  //The xpos and ypos should be x=40 and y=120 for the first comment. Each comment is 125px y lower.

  //Need to move the modal with the scroll Y of the mousewheel.
  //FIXME: THIS IS A STUB and cannot be used for all... this just gets me to the FIRST <li> in the list of comments.
  if (xpos !== "50") {
    xpos = "50";
  }
  if (ypos !== "120") {
    ypos = "120";
  }

  this.css.outerWrapper.transform.newxy = "translate(" + xpos + "px" + ", " + ypos + "px)";
  this.theMovingModal.style.transform = this.css.outerWrapper.transform.newxy;

} 

Answer 1

I've made some changes and added some code to achieve what you wanted.

function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement;
}

var ul = document.getElementsByClassName('commentlist')[0];
ul.onclick = function(event) {
    var target = getEventTarget(event);
    var elemPos = getOffset(target);
    alert(target.innerHTML + " ::: " + elemPos.top + " : " + elemPos.left);
};

function getOffset(el) {
    var _x = 0;
    var _y = 0;
    while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return {
        top: _y,
        left: _x
    };
}

The getOffset function calculates the top and left position of an element.

Demo at jsfiddle.net/h3vcjsr7