Add click event to iframe

Question

I want to add a click event to an iframe. I used this example and got this:

$(document).ready(function () {
   $('#left').bind('click', function(event) { alert('test'); });
});

<iframe src="left.html" id="left">
</iframe>

But unfortunately nothing happens.
When I test it with another element (e.g. a button), it works:

<input type="button" id="left" value="test">

Answer 1

You could attach the click to the iframe content:

$('iframe').load(function(){
  $(this).contents().find("body").on('click', function(event) { alert('test'); });
});

Note: this will only work if both pages are in the same domain.

Live demo: http://jsfiddle.net/4HQc4/

Answer 2

Two solutions:

1. Using :after on a .iframeWrapper element
2. Using pointer-events:none; one the iframe

1. Using :after

Quite straightforward. The iframe wrapper has a :after (transparent) pseudo element with higher z-index - that will help the wrapper to register the click:

jQuery(function ($) { // DOM ready
  
   $('.iframeWrapper').on('click', function(e) {
     e.preventDefault();
     alert('test');
   });
  
});

.iframeWrapper{
  display:inline-block;
  position:relative;
}
.iframeWrapper:after{ /* I have higher Z-index so I can catch the click! Yey */
  content:"";
  position:absolute;
  z-index:1;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

.iframeWrapper iframe{
  vertical-align:top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="iframeWrapper">
  <iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>

2. Using pointer-events:none;

Clicks are not handleable from outside the iframe from an external resource (if the iframe is not in your domain).
You can only create that function inside your 'called into iframe' page, not from within the iframe-hosting page.

How to do it:

• You can wrap your iframe into a div
• make the click "go through" your iframe using CSS pointer-events:none;
• target clicks with jQuery on your wrapping DIV (the iframe parent element)

jQuery(function ($) { // DOM ready
  
   $('.iframeWrapper').on('click', function(e) {
     e.preventDefault();
     alert('test');
   });
  
});

.iframeWrapper{
  display:inline-block;
  position:relative;
}

.iframeWrapper iframe{
  vertical-align:top;
  pointer-events: none; /* let any clicks go trough me */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="iframeWrapper">
  <iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>

NOTA BENE:

• No clicks will be registered by the iframe element, so a use-case would be i.e: if by clicking the iframe you want to enlarge it full screen.... Etc...
• Also (kindly suggested by @Christophe) IE8 is blind to pointer-events :\