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 vote156 views1 answer
Wicked pdf rails start new page
Html
0 vote177 views2 answers
Iframe to fit screen in flutter
Html
0 vote184 views1 answer
Html href click not refresh
Html
8 votes170 views1 answer
How do i set a pdf to be download link in html
Html
0 vote174 views1 answer
How to download html image with name using jquery
Html
1 vote162 views1 answer
Html lowercase
Html
1 vote171 views1 answer
Ionic onfig.xml hide loader
Html
15 votes170 views5 answers
Bootstrap accordion
Html
0 vote166 views1 answer
Pros/cons of using `.createElement()` and `append()` vs. `.innerHTML`?
Html
0 vote148 views6 answers
Starter template bootstrap
Html