From 20253238c82487b5e493b3896edb6dc9f794ad04 Mon Sep 17 00:00:00 2001
From: Chalarangelo <chalarangelo@gmail.com>
Date: Wed, 6 Jan 2021 13:57:56 +0200
Subject: [PATCH] Add onClickOutside

---
 snippets/onClickOutside.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 snippets/onClickOutside.md

diff --git a/snippets/onClickOutside.md b/snippets/onClickOutside.md
new file mode 100644
index 000000000..443e8cefc
--- /dev/null
+++ b/snippets/onClickOutside.md
@@ -0,0 +1,22 @@
+---
+title: onClickOutside
+tags: browser,event,intermediate
+---
+
+Runs the callback whenever the user clicks outside of the specified element.
+
+- Use `EventTarget.addEventListener()` to listen for `'click'` events.
+- Use `Node.contains()` to check if `Event.target` is a descendant of `element` and run `callback` if not.
+
+```js
+const onClickOutside = (element, callback) => {
+  document.addEventListener('click', e => {
+    if (!element.contains(e.target)) callback();
+  });
+};
+```
+
+```js
+onClickOutside('#my-element', () => console.log('Hello'));
+// Will log 'Hello' whenever the user clicks outside of #my-element
+```