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和侦听器对象来监听点击。它是一个更清洁的解决方案，我只需要绕过它。 You can view my other solution here.

Answer 2

我不知道这对你的特定问题会有多大帮助，但我恰好注意到你使用jQuery的“on（）”方法可能会遇到问题。

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

与“live”不同，我认为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。

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

绝对定位元素的Z指数显示高于Z-指数元素

3 个答案: