Получить точные значения X / Y для <li>независимо от того, где нажата мышь, используя Typescript - PullRequest
Новая
       39

Получить точные значения X / Y для <li>независимо от того, где нажата мышь, используя Typescript

0 голосов
/ 28 февраля 2019

Мне бы очень нужна помощь по этому вопросу ... Я заблокирован!

Хорошо, здесь простой вопрос, но мне не хватает одного ключевого компонента.

Это моя скрипка, благодаря которой я могу "найти" предмет, когда нажимаю на него, но это все.

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 от

Что мне нужно, так это ЗНАЧЕНИЕ ЦЕНТРА для положения мыши, КОГДА она нажата.

На изображении ниже вы увидите слово «ПРИНЯТО».Когда я нажимаю на это, все, что мне нужно, это НАРУЖНОЕ НАИБОЛЕЕ в левом положении X / Y элемента li.

Comments section in from my app

Там может быть 'n'количество комментариев на запись и единственное место, где вы можете нажать на комментарий, - это место, где находится слово «ПРИНЯТО».ПРИМЕЧАНИЕ. Принятым является тестовое слово, и оно может быть предложением или просто словом.

Я пытаюсь получить СРЕДНЮЮ ТОЧКУ каждого элемента li.Вот и все.Хорошие новости на странице, где я хочу, чтобы мой модал появлялся, начинаются с: transform: translate (40px, 120px);Следующий li - это точно 125px DOWN на оси Y и т. Д. Для каждого последующего li.

В зависимости от размеров окна просмотра, ноутбуков, настольных компьютеров, больших мониторов, маленьких и т. Д. ... как я могу точно определитьТОЧНАЯ позиция?(в основном, мертвый ЛЕВЫЙ центр элемента li).Высоты 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;

}

1 Ответ

0 голосов
/ 01 марта 2019

Я внес некоторые изменения и добавил код для достижения того, что вы хотели. 

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

...