Question

I am trying to create some javascript that when an object is added to the window, a listener listens for any click on the body except for the placed object and removes the object if anywhere on the window except the actual object itself is clicked.

Through numerous unsuccessful attempts, the idea I came up with is to dynamically add an overlay div to the screen called overlay2 (or whatever, it doesnt matter) and then listen for clicks on that div. When I add the overlay to the window and set the zIndex to a higher number than the top element already placed (say 5000) and then set the zIndex of the only object to be placed above the overlay to an even higher number (say 6000), the overlay still appears on top of everything and I cannot select any of the objects in the div I meant to place above it.

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;
    });

I’ve determined that this has everything to do with the absolute positioning of the overlayDiv. While testing, if I used absolute positioning to place the template and if I append the template object directly to the body like I did the overlayDiv, the zIndex works above the overlayDiv as I originally anticipated. Unfortunately absolutely positioning this element doesn’t make much sense for me beyond testing purposes. Is there a way to get around this?

Answer 1

Turns out that z-index can really only be used successfully with absolute placed elements. Therefore the original plan to solve the body click listener will not work. Instead, I decided to use jQuery and listener objects to listen for the click instead. Its a much cleaner solution, I just had to wrap my head around it. You can view my other solution here.