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

Question

我真的很想得到一些帮助...我被屏蔽了！

好的，这是一个简单易行的问题，但我遗漏了一个关键部分。

这是我的 fiddle 我可以 "find" 单击该项目但仅此而已。

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>

这是让我继续做这个的 Whosebug 问题：

Get Clicked <li> from <ul onclick>

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

在下图中，您会看到 "ACCEPTED" 这个词。当我点击它时，我所需要的只是 li 元素最左边的 X/Y 位置。

每条记录可以有 'n' 条评论，您唯一可以点击评论的地方就是 "ACCEPTED" 这个词所在的位置。注意：Accepted是一个测试词，它可以是一个句子，也可以只是一个简单的词。

我想要得到的是每个 li 元素的中间点。而已。好消息，在页面上，我希望我的模态出现的地方开始于： transform: translate(40px, 120px);下一个 li 在 Y 轴上正好向下 125px，以此类推。

根据不同的视口大小、笔记本电脑、台式机、大型显示器、小型显示器等...我如何才能精确定位？（基本上，li 元素的死左中心）。 LI 的高度都是一样的：让我们以 100px 为例：50px 因此是死点。

坏消息：我无法触摸现有代码，只能使用我传递到我的 .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

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

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

html

css

typescript

angular5

event-delegation