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

68 votes297 views4 answers
Favicon in html document
Html
3 votes274 views3 answers
How to use strong in html
Html
5 votes287 views3 answers
Angular input onchange
Html
0 vote283 views1 answer
Calendar.js:156 Uncaught TypeError: Cannot set property 'src' of null at HTMLDivElement.<anonymous>
Html
1 vote270 views1 answer
How to formate text in div
Html
2 votes257 views1 answer
Assign stylesheet
Html
101 votes298 views2 answers
How to make href open in a new tab link html
Html
0 vote260 views1 answer
Tooltag html grepper
Html
2 votes289 views2 answers
Positioning button inside div
Html
-2 votes275 views1 answer
Wordpress html templates
Html