JS判断元素是否在最上层且被展示

function isElementTopAndVisible(element) {
    // 检查元素的可见性
    function isVisible(element) {
        const rect = element.getBoundingClientRect();
        return rect.width > 0 && rect.height > 0 &&
               window.getComputedStyle(element).display !== 'none' &&
               window.getComputedStyle(element).visibility !== 'hidden';
    }

    // 判断元素是否在最上层
    function isOnTop(element) {
        const rect = element.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        // 确保中心点在视口内, 这里需要注意下，如果目标元素被遮挡了大部份，也被设为不在最上层，所以这里需要按照距离场景做调整
        if (centerX < 0 || centerY < 0 || centerX > window.innerWidth || centerY > window.innerHeight) {
            return false;
        }
        const topElement = document.elementFromPoint(centerX, centerY);
        return element === topElement || element.contains(topElement);
    }

    return isVisible(element) && isOnTop(element);
}

                    

原文链接：blog.csdn.net/qq_41179280…