separate click inside logic from rest of event handler

dialog.js

@@ -13,14 +13,10 @@ export class Dialog extends HTMLElement {
       this.headerEl, this.bodyEl, this.footerEl
     )
     this.dialogEl.addEventListener('click', e => {
-      const rect = this.dialogEl.getBoundingClientRect();
+      if (
-      const clickedInDialog = (
+        e.target === this.dialogEl &&
-        rect.top <= e.clientY &&
+        !this.clickedInside(e, this.dialogEl)
-        e.clientY <= rect.top + rect.height &&
+      ) {
-        rect.left <= e.clientX &&
-        e.clientX <= rect.left + rect.width
-      )
-      if (e.target === this.dialogEl && !clickedInDialog) {
         this.close()
       }
     })
@@ -76,4 +72,14 @@ export class Dialog extends HTMLElement {
       this.dialogEl.classList.remove('closing')
     }, 500)
   }
+
+  clickedInside(e, el) {
+    const rect = el.getBoundingClientRect()
+    return (
+      rect.top <= e.clientY &&
+      e.clientY <= rect.top + rect.height &&
+      rect.left <= e.clientX &&
+      e.clientX <= rect.left + rect.width
+    )
+  }
 }