检索a的确切X / Y值 无论使用Typescript点击鼠标在哪里

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>

我需要的是当鼠标点击时鼠标位置的中心值。

在下图中，您将看到“接受”一词。当我点击它时，我所需要的只是li元素的左边X / Y位置。

每条记录可以有'n'个评论，唯一可以点击评论的地方就是“接受”这个词。注意：接受是一个测试词，它可以是一个句子或只是一个简单的单词。

我想要得到的是每个li元素的MIDDLE POINT。而已。好消息，在页面上，我希望我的模态出现在：transform：translate（40px，120px）;下一个li在Y轴上完全是125px DOWN，对于每个后续li，依此类推。

基于不同的视口大小，笔记本电脑，台式机，大型显示器，小型等......如何确定精确位置？ （基本上，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演示