绝对位置元素上的Z索引显示在较高Z索引元素上方

Question

我正在尝试创建一些JavaScript，当将对象添加到窗口时，侦听器侦听除已放置对象之外的所有单击主体的行为，如果单击窗口中除实际对象本身以外的任何位置，则将对象移除。

经过多次失败的尝试，我想到的想法是将一个覆盖div动态添加到名为overlay2的屏幕上（或其他，没关系），然后侦听该div上的点击。 当我将叠加层添加到窗口并将zIndex设置为比已放置的顶部元素高的数字（例如5000），然后将要放置在叠加层上方的唯一对象的zIndex设置为更高的数字（例如6000） ，该叠加层仍会显示在所有内容的顶部，并且我无法选择要放置在其上方的div中的任何对象。

var overlayDiv = document.createElement('div');
    overlayDiv.setAttribute('id', 'overlay2');
    overlayDiv.style.zIndex = '5000';
    overlayDiv.style.width = '100%';
    overlayDiv.style.height = '100%';
    overlayDiv.style.left = '0';
    overlayDiv.style.top = '0';
    overlayDiv.style.position = 'absolute';
    document.body.appendChild(overlayDiv);

    $(container).append(template);
    template.style.zIndex = '6000';

    //Listeners     
    //Page click listener. Closes the tool when the page is clicked anywhere but inside the parent.
    var initialClick = false;
    $('body').on('click.editObjectListeners', function(event) {
        var target = EventUtility.getTarget(event);
        if(initialClick) {
            console.log(target.id);
            if(target.id == 'overlay2' && target.id != '') {
                $(overlayDiv).remove();
                finish();
            };
        }
        initialClick = true;
    });

我确定这与overlayDiv的绝对位置有关。 在测试过程中，如果我使用绝对定位放置模板，并且像我做overlayDiv一样直接将模板对象附加到主体，则zIndex会按照我最初的预期工作在overlayDiv之上。 不幸的是，绝对定位此元素对我来说超出测试目的没有多大意义。 有办法解决这个问题吗？

Answer 1

事实证明，z-index实际上只能与绝对放置的元素一起成功使用。 因此，解决正文点击侦听器的原始计划将行不通。 相反，我决定改用jQuery和侦听器对象来侦听单击。 它是一种更清洁的解决方案，我只需要把头缠在它上面。 您可以在此处查看我的其他解决方案。

Answer 2

我不知道这对您的特定问题有多大帮助，但是我只是偶然发现您在使用jQuery的“ on（）”方法时可能会遇到问题。

首先，您正在使用jQuery 1.7+及更高版本，对吗？

与“实时”不同，我相信on（）参数是event ， selector ， function 。

因此，您在这里：

$('body').on('click.editObjectListeners', function(event) {
        var target = EventUtility.getTarget(event);
        if(initialClick) {
            console.log(target.id);
            if(target.id == 'overlay2' && target.id != '') {
                $(overlayDiv).remove();
                finish();
            };
        }
        initialClick = true;
    });

我想你想要这个：

$('body').on('click.editObjectListeners', [SOME SELECTOR], function(event) {
        var target = EventUtility.getTarget(event);
        if(initialClick) {
            console.log(target.id);
            if(target.id == 'overlay2' && target.id != '') {
                $(overlayDiv).remove();
                finish();
            };
        }
        initialClick = true;
    });

希望对您有所帮助。

祝好运！

Answer 3

在将zIndex附加到container之前，尝试设置zIndex 。

template.style.zIndex = '6000';
$(container).append(template);