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

8 votes137 views1 answer
TypeError: Illegal invocation
Html
1 vote139 views1 answer
Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Html
1 vote144 views1 answer
Html link para descargar archivo de audio
Html
8 votes87 views2 answers
Input type year
Html
0 vote135 views1 answer
Icon for instagram in bootstrap
Html
0 vote139 views1 answer
Python split html header
Html
0 vote153 views1 answer
Vuejs @change only one time
Html
0 vote122 views2 answers
How to cover whole webpage by background image in html
Html
0 vote131 views1 answer
Prevent the child event from triggering the parent element angular 5
Html
38 votes132 views6 answers
Html iframe example
Html