title: Bubbling events from HTML elements down into iframe
body: <p>I have an iframe that acts as a big button. The entire content inside of the iframe is one click target.</p>
  
  <p>What I'd like to do is hover some piece of HTML over the iframe kind of like in this example.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              iframe {
                  height: 100px;
                  width: 300px;
              }
              div {
              position: relative;
              }
              a {
                   position: absolute;
                   top: 0;
                  left: 0;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="content"&gt;
              &lt;iframe src="frame.html"&gt;&lt;/iframe&gt;
              &lt;a id="text"&gt;Image&lt;/a&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>You can also see a live example here <a href="http://dev.gjcourt.com/iframe" rel="nofollow">http://dev.gjcourt.com/iframe</a></p>
  
  <p>The problem is that I'd like to have click events from the anchor bubble down into the iframe. Is there any way to make this possible?</p>