确定 html 元素的可见性/真实 z-index

Question

是否可以确定用户是否可以看到 html 元素？

例子

一个页面有一个带有日期选择器的输入字段。如果用户单击输入字段，则会出现另一个 div，允许用户选择所需的日期。

只要日期选择器可见，它就会隐藏它后面的元素。我需要一种方法来判断一个元素是否被隐藏。

第一种方法

一种方法是检查和比较z-index值。但是如果它们被明确设置，它们总是auto.

另一种方法可能是一种检查元素是否对用户可见的方法。但我想不出任何方法来做到这一点。

该:visible选择并不在这种情况下工作，因为该元素只隐藏到用户的眼睛，但仍清晰可见。

有什么建议？

Answer 1

我尝试了使用元素坐标 ( getBoundingClientRect)的不同方法，然后使用它elementFromPoint来查看元素是隐藏还是可见。

演示（按照右侧的说明进行操作）

        var rectPos = this.getBoundingClientRect();

        var result = 0;
        if (this == document.elementFromPoint(rectPos.left, 
                                                    rectPos.top)) {
            result++;
        }
        if (this == document.elementFromPoint(rectPos.left, 
                                                    rectPos.bottom - 1)) {
            result++;
        }
        if (this == document.elementFromPoint(rectPos.right - 1, 
                                                     rectPos.top)) {
            result++;
        }
        if (this == document.elementFromPoint(rectPos.right - 1, rectPos.bottom - 1)) {
            result++;
        }

        if (result == 4) {
            result = 'visible';
        } else if (result == 0) {
            result = 'hidden';
        } else {
            result = 'partially visible';
        }

进一步阅读： getBoundingClientRect，elementFromPoint

Answer 2

这可能有效。我还没有测试过。这是我在这里找到的一些代码的修改版本。

function elementWithinElement(elemPossiblyCovered, elemPossiblyCovering)
{
    var top = elemPossiblyCovered.offsetTop;
    var left = elemPossiblyCovered.offsetLeft;
    var width = elemPossiblyCovered.offsetWidth;
    var height = elemPossiblyCovered.offsetHeight;

    while (elemPossiblyCovered.offsetParent)
    {
        elemPossiblyCovered = elemPossiblyCovered.offsetParent;
        top += elemPossiblyCovered.offsetTop;
        left += elemPossiblyCovered.offsetLeft;
    }

    return (
    top >= elemPossiblyCovering.offsetTop &&
    left >= elemPossiblyCovering.offsetLeft &&
    (top + height) <= (elemPossiblyCovering.offsetTop + elemPossiblyCovering.offsetHeight) &&
    (left + width) <= (elemPossiblyCovering.offsetLeft + elemPossiblyCovering.offsetWidth)
  );
}

所以它会是这样的：

if(elementWithinElement(myTextbox, theDatepickerDiv))
{ 
    // It's hidden
}else
{
    //It's visible
}

编辑：部分代码未更新。现在应该修复了。

再次编辑：修复代码并进行测试。有用！