Outside click hide div

JavaScript hide element on click outside

function hideOnClickOutside(element) {
    const outsideClickListener = event => {
        if (!element.contains(event.target) && isVisible(element)) { // or use: event.target.closest(selector) === null
          element.style.display = 'none';
          removeClickListener();
        }
    }

    const removeClickListener = () => {
        document.removeEventListener('click', outsideClickListener);
    }

    document.addEventListener('click', outsideClickListener);
}

const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ); // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js

Source: stackoverflow.com

Similar codes

0 vote214 views1 answer
How to make div accessable with tab
Html
36 votes238 views2 answers
Input without autocomplete
Html
1 vote195 views1 answer
Load static css django and image
Html
0 vote216 views1 answer
Html lang="ro"
Html
13 votes192 views3 answers
Remove basic html style link
Html
0 vote191 views1 answer
C++ compile syntax error
Html
0 vote221 views2 answers
Change the font-size on a label css
Html
1 vote203 views1 answer
Vuetify row center vertically
Html
4 votes190 views1 answer
Capture textarea value
Html
0 vote200 views1 answer
Html path svg stop
Html