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 vote259 views1 answer
Vuetify datatable header checkbox select all
Html
2 votes246 views1 answer
Twig length
Html
0 vote282 views1 answer
Make so only certain ip's can accesss html file
Html
0 vote251 views1 answer
Use svg as favicon react
Html
0 vote257 views1 answer
Close button on google map jump the page
Html
1 vote271 views1 answer
Html link para descargar archivo de audio
Html
0 vote347 views1 answer
Card button align bottom bootstrap
Html
5 votes250 views2 answers
Table bootstrap with scrool
Html
0 vote268 views1 answer
Disable form first dropdown option
Html
0 vote266 views1 answer
Simple form time input
Html