diff --git a/example/src/views/Home.vue b/example/src/views/Home.vue
index d43288e6..82dc5e18 100644
--- a/example/src/views/Home.vue
+++ b/example/src/views/Home.vue
@@ -16,6 +16,11 @@
         <p>Click Outside Lime box</p>
       </div>
 
+      <div class="blue-box" v-click-outside="onBlueClick">
+        <p>Click Outside blue box</p>
+        <iframe tabindex="1" class="iframe-button-example" src="/about" />
+      </div>
+
       <iframe class="iframe" src="/about" width="100%" />
     </div>
   </div>
@@ -49,20 +54,28 @@ export default {
 
   methods: {
     onYellowClick(ev) {
-      console.log('Clicked outside Yellow!', ev)
+      console.log(
+        '%c Clicked outside Yellow!',
+        'color: yellow; background: black;',
+        ev,
+      )
     },
 
     onRedClick(ev) {
-      console.log('Clicked outside Red!', ev)
+      console.log('%c Clicked outside Red!', 'color: red', ev)
     },
 
     onRedClickMiddleware(ev) {
-      console.log('Middleware from click outside Red!', ev)
+      console.log('%c Middleware from click outside Red!', 'color: red', ev)
       return true
     },
 
     onLimeClick(ev) {
-      console.log('Clicked outside Lime!', ev)
+      console.log('%cClicked outside Lime!', 'color: lime', ev)
+    },
+
+    onBlueClick(ev) {
+      console.log('%c Clicked outside Blue!', 'color: blue', ev)
     },
   },
 }
@@ -85,6 +98,19 @@ export default {
   height: 50px;
 }
 
+.blue-box {
+  background-color: blue;
+  color: white;
+}
+
+.iframe-button-example {
+  border: 2px solid white;
+  border-radius: 8px;
+  width: 200px;
+  height: 50px;
+  overflow: hidden;
+}
+
 .iframe {
   border: 1px solid lightgrey;
   margin-top: 1em;
diff --git a/src/v-click-outside.js b/src/v-click-outside.js
index 503d088d..4e58dcad 100644
--- a/src/v-click-outside.js
+++ b/src/v-click-outside.js
@@ -30,12 +30,13 @@ function execHandler({ event, handler, middleware }) {
   }
 }
 
-function onFauxIframeClick({ event, handler, middleware }) {
+function onFauxIframeClick({ el, event, handler, middleware }) {
   // Note: on firefox clicking on iframe triggers blur, but only on
   //       next event loop it becomes document.activeElement
   // https://stackoverflow.com/q/2381336#comment61192398_23231136
   setTimeout(() => {
-    if (document.activeElement.tagName === 'IFRAME') {
+    const { activeElement } = document
+    if (activeElement.tagName === 'IFRAME' && !el.contains(activeElement)) {
       execHandler({ event, handler, middleware })
     }
   }, 0)
@@ -73,14 +74,14 @@ function bind(el, { value }) {
   el[HANDLERS_PROPERTY] = events.map((eventName) => ({
     event: eventName,
     srcTarget: document.documentElement,
-    handler: (event) => onEvent({ event, el, handler, middleware }),
+    handler: (event) => onEvent({ el, event, handler, middleware }),
   }))
 
   if (detectIframe) {
     const detectIframeEvent = {
       event: 'blur',
       srcTarget: window,
-      handler: (event) => onFauxIframeClick({ event, handler, middleware }),
+      handler: (event) => onFauxIframeClick({ el, event, handler, middleware }),
     }
 
     el[HANDLERS_PROPERTY] = [...el[HANDLERS_PROPERTY], detectIframeEvent]