使用javascript查找元素'

Finding an element's position using javascript

本文关键字：元素 javascript 查找 使用      更新时间：2023-09-26

嗨，伙计们，我有以下代码，这是我用来创建一个简单的工具提示。

<div class="x">
    <div class="abc">abc</div>
</div>
javascript

//Finding the elements position
var elmPosition = function (elm) {
    var x = 0,
        y = 0;
    while (elm) {
        x += (elm.offsetLeft - elm.scrollLeft + elm.clientLeft);
        y += (elm.offsetTop - elm.scrollTop + elm.clientTop);
        elm = elm.offsetParent;
    }
    return {
        x: x,
        y: y
    };
};
//Creating and adding the tooltip to document
document.querySelector('.abc').addEventListener("mouseover", function () {
    var elm = document.createElement("div");
    var position = elmPosition(document.querySelector('.abc'));
    elm.textContent = 'just a tooltip';
    elm.classList.add('tooltip');
    document.body.appendChild(elm);
    elm.style.position = 'absolute';
    elm.style.top = (position.y - 20) + 'px';
});
//remove tooltip on mouse out
document.querySelector('.abc').addEventListener("mouseout", function () {
    document.body.removeChild(document.body.querySelector('.tooltip'));
})

生成的工具提示应该始终位于鼠标悬停元素的顶部。在滚动页面之前，此代码可以正常工作。当页面滚动时，工具提示的位置被推到离鼠标悬停元素很远的地方。谁能帮我查一下是什么问题吗?谢谢:)

您正在检查使用scrollLeft的是elm滚动的距离。我猜你想要的是窗口滚动多远。

使用window.pageYOffset和window.pageXOffset:

while (elm) {
    x += (elm.offsetLeft - window.pageXOffset + elm.clientLeft);
    y += (elm.offsetTop - window.pageYOffset + elm.clientTop);
    elm = elm.offsetParent;
}

编辑

在尝试之后，如果你不使用position: fixed，那么涉及滚动并不太有意义。我删除了它并编辑了您的小提琴:https://jsfiddle.net/mg606dh1/2/

编辑2

您也可以将位置更改为position: fixed，并按照您的意思使用代码:https://jsfiddle.net/mg606dh1/3/

相关文章：