title: How to grab some mouse events, send others to iframe?
body: <p>I need to capture certain user events (i.e. double-click) but let the rest pass to the iframe below. Some of these events may be enabled/disabled over time. I also don't want to block the iframe from receiving simple events like click or scroll. It seems, however, that iframe gets dibs on both bubble events (makes sense) and capture (this doesn't make sense, as it violates the order of propagation).</p>
  
  <p>It seems like the only way to prevent the iframe from stealing all events is by putting an invisible div above it. In that case, however, I'd need to write handlers for all events to create a fake fall-through to the iframe, because even the events the div doesn't capture will no longer hit the iframe.</p>
  
  <p>I see the following potential problems with this approach:</p>
  
  <ul>
  <li>I may not be able to pass-through/simulate a click event into a foreign iframe (most iframes would be generated via srcdoc, so they'd be local, but some may reference foreign location via src)</li>
  <li>I will need to write handlers for just about every mouse event to simulate a pass-through</li>
  <li>It may be problematic to send the event to iframe itself and let it resolve the coordinates rather than detecting which element inside the iframe should receive the event</li>
  </ul>
  
  <p>I may be wrong about my assumptions, so feel free to correct me.</p>
  
  <p>Another approach I played around with involves detecting when iframe gets focus:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function clickListener() {
      var monitor = setInterval(function(){
          var elem = document.activeElement;
          if(elem &amp;&amp; elem.tagName == 'IFRAME'){
              message.innerHTML = 'Clicked';
              setInterval(function() {
                  message.innerHTML = '';
              }, 100);
              clearInterval(monitor);
              elem.blur();
              clickListener();
          }
      }, 100);
  }
  clickListener();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>iframe {
      width: 500px;
      height: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;iframe id="iframe" src="//example.com"&gt;&lt;/iframe&gt;
  &lt;div id="message"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Problems with this approach:</p>
  
  <ul>
  <li>the 100ms loop isn't ideal when I have 20+ elements on the page doing this</li>
  <li>it ignores hover events and lumps all click-like events into a click</li>
  </ul>
  
  <p>These two problems (especially the 2nd) are actually pretty severe show-stoppers, as I want to be able to detect double-click and drag events as well.</p>
  
  <p>Does anyone have suggestions for how to tackle this?</p>