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

20 votes292 views3 answers
Custom data attributes html
Html
1 vote293 views1 answer
How can we open file manager by html
Html
10 votes288 views1 answer
Stylesheet einbinden html
Html
0 vote328 views1 answer
12,3 x 4,8
Html
1 vote324 views1 answer
A tag for the same page
Html
5 votes308 views2 answers
Html lang en-us or en-US
Html
0 vote288 views1 answer
Slim-rails gem
Html
0 vote314 views2 answers
Add clear button to text input
Html
1 vote329 views1 answer
Html first line indent
Html
1 vote334 views1 answer
Allow xlsx and csv files rails file field accept values
Html