无论使用Typescript在何处单击鼠标，都检索<li>的确切X / Y值

Question

我真的很想要这方面的帮助...我被阻止了！

好的，这是一个简单的简单问题，但我缺少一个关键组成部分。

这是我的小提琴，通过它我可以在单击时“查找”该项目，仅此而已。

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

这是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);
};

以下是我在应用程序中显示的HTML：

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

这是让我继续这样做的Stackoverflow问题：

Get Clicked <li> from <ul onclick>

我需要的是单击鼠标时鼠标位置的CENTER VALUE。

在下面的图像中，您将看到单词“ ACCEPTED”。当我单击它时，我所需要的只是li元素的OUTER MOST左X / Y位置。

每条记录可以有n条评论，并且您唯一可以单击评论的地方就是该单词“ ACCEPTED”。注意：接受的是测试词，可以是句子，也可以只是一个简单的词。

我想要得到的是每个li元素的中间点。而已。在页面上，我希望我的模态出现的好消息开始于：transform：translate（40px，120px）;下一个li在Y轴上精确地向下倾斜125px，依此类推。

基于不同的视口大小，笔记本电脑，台式机，大型显示器，小型显示器等，如何确定精确位置？ （基本上是li元素的死LEFT中心）。 LI高度都相同：以100px为例：50px因此是DEAD CENTER。

坏消息：我无法触摸现有代码，只能使用传递到.ts文件中的事件，如下所示：

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

我进行了一些更改，并添加了一些代码来实现您想要的。

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
    };
}

getOffset函数计算元素的顶部和左侧位置。

演示在jsfiddle.net/h3vcjsr7