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 vote338 views1 answer
Html set all text size
Html
0 vote330 views2 answers
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
Html
0 vote323 views1 answer
Mat-icon outline
Html
1 vote366 views1 answer
Multiple ternary in vuejs
Html
1 vote303 views1 answer
Html preselected radio button
Html
0 vote302 views1 answer
How to add a border under div bootstrap
Html
36 votes318 views6 answers
Mailto link html
Html
8 votes321 views2 answers
Html charset
Html
78 votes316 views3 answers
Bootstrap change font color of text
Html
0 vote331 views1 answer
Customize the names of downloadable files
Html