{"id":1128,"date":"2018-05-31T23:11:49","date_gmt":"2018-05-31T22:11:49","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1128"},"modified":"2022-07-25T08:35:44","modified_gmt":"2022-07-25T07:35:44","slug":"javascript-hide-on-click-outside-element","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/javascript-hide-on-click-outside-element\/","title":{"rendered":"Javascript: Hide on click outside element"},"content":{"rendered":"<p>Source: <a href=\"https:\/\/stackoverflow.com\/a\/3028037\">https:\/\/stackoverflow.com\/a\/3028037<\/a><\/p>\n<pre class=\"lang:js decode:true  \">function hideOnClickOutside(element) {\r\n    const outsideClickListener = event =&gt; {\r\n        if (!element.contains(event.target)) { \/\/ or use: event.target.closest(selector) === null\r\n            if (isVisible(element)) {\r\n                element.style.display = 'none'\r\n                removeClickListener()\r\n            }\r\n        }\r\n    }\r\n\r\n    const removeClickListener = () =&gt; {\r\n        document.removeEventListener('click', outsideClickListener)\r\n    }\r\n\r\n    document.addEventListener('click', outsideClickListener)\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Source: https:\/\/stackoverflow.com\/a\/3028037 function hideOnClickOutside(element) { const outsideClickListener = event =&gt; { if (!element.contains(event.target)) { \/\/ or use: event.target.closest(selector) === null if (isVisible(element)) { element.style.display = &#8216;none&#8217; removeClickListener() } } } const removeClickListener = () =&gt; { document.removeEventListener(&#8216;click&#8217;, outsideClickListener) } document.addEventListener(&#8216;click&#8217;, outsideClickListener) } &nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-1128","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1128"}],"version-history":[{"count":3,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1128\/revisions"}],"predecessor-version":[{"id":1141,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1128\/revisions\/1141"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}