gpt4 book ai didi

html - 使用 Typescript 检索
  • 的确切 X/Y 值,无论鼠标在何处单击
  • 转载 作者:太空宇宙 更新时间:2023-11-04 06:27:52 25 4
    gpt4 key购买 nike

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

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

    这是我的 fiddle ,当我点击它时我可以“找到”该元素,但仅此而已。

    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 位置。

    Comments section in from my app

    每条记录可以有“n”条评论,您唯一可以点击评论的地方就是“已接受”这个词所在的位置。注意:Accepted 是一个测试词,它可以是一个句子,也可以只是一个简单的词。

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

    基于不同的视口(viewport)大小、笔记本电脑、台式机、大型显示器、小型显示器等……我如何才能精确定位? (基本上,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;

    }

    最佳答案

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

    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

    关于html - 使用 Typescript 检索 <li> 的确切 X/Y 值,无论鼠标在何处单击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54918282/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com