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

1 vote303 views1 answer
Commento in html
Html
3 votes290 views1 answer
Full Stack web dev meanin
Html
1 vote298 views1 answer
Ionic button trigger ion-datetime
Html
49 votes292 views6 answers
Text color html
Html
0 vote318 views2 answers
Vertical line bootstrap
Html
6 votes294 views2 answers
Show table border collapse
Html
0 vote305 views1 answer
Static html require a role
Html
0 vote298 views1 answer
Can col be in side selection html
Html
7 votes312 views1 answer
Multibyte string input conversion in PHP is active and must be disabled
Html
0 vote295 views1 answer
Data-url html
Html