Определить видимость / реальный z-индекс HTML-элементов

Question

Можно ли определить, является ли элемент html видимым для пользователя?

Пример

Страница имеет поле ввода с указателем даты.Если пользователь нажимает на поле ввода, появляется другой элемент div, который позволяет пользователю выбрать желаемую дату.

Пока отображается средство выбора даты, оно скрывает элементы, которые находятся за ним.Мне нужен способ определить, является ли элемент скрытым или нет.

Первый подход

Один из способов - проверить и сравнить значения z-index.Но если они явно указаны, они всегда auto.

Другим способом может быть способ проверить, видим ли элемент пользователю.Но я не могу придумать никакого способа сделать это.

Селектор :visible не работает в этой ситуации, потому что элемент скрыт только для глаз пользователя, но все еще видим.

Есть предложения?

Answer 1

Я попробовал другой подход, используя координаты элементов (getBoundingClientRect), а затем используя elementFromPoint, чтобы увидеть, скрыт или видим элемент.

DEMO (следуйте инструкциям на правой стороне)

        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
}

Редактировать: Часть кодане обновляется.Должно быть исправлено сейчас.

Edit Again: исправил код и проверил его.Это работает!

Answer 3

я могу думать только о том, чтобы получить смещение каждого элемента и проверить, что щелчок чего-либо не соответствует смещению нового элемента. Очевидно, что только теория, лежащая в основе этого, делает что-то, что делает это, займет много времени. Удачи:)