Properly close Pop-up by clicking outside of it?

Question

i have some bug in my html+css+js documents. here is the map, and if u click on one of these numbers, there is a pop-up (info tag), but it lags if u clicking outside of it. It works only if u click "location_pop" div, but i want to close pop up by simply clicking outside of it. I need to write it only using singe html doc to put it into T123 Tilda Block.

html doc open this document to fully see a picture

i have added click event, but probably have some bug in vars i dont know but its not working.

js code

        document.addEventListener('click', (e) => {
            if(e.target === popupBg) {
                popupBg.classList.remove('active');
            }
        });

Answer 1

I just seen your bug, you are comparing the wrong element.If the user click any where in svg the popup will close. Instead try this

document.addEventListener('click', (e) => {
        if(e.target.tagName === 'svg') {
            popupBg.classList.remove('active');
        }
});