How to detect click on javascript which is fired from DIV? For example I have 3 adSense ads in 3 differnt DIVs on page, and I want to detect and trigger operation when ad is clicked. It is of course easy to detect click on DIV when it is empty, or with any other element but how to detect click on adSense ad (code)? Any idea? I will be very grateful,this torturing me for 3 days:) thanks.
A:
As far as I'm aware, Adsense ads are loaded in an iframe element so accessing them would be violating the same origin policy. This means you can't detect clicks in an iframe pointing to an external URL, so it can't be done.
Andy E
2010-01-19 18:16:12
Are you sure? You confused me. I will not touch adsense code, this look something like:<DIV>.......adsense JavaScript here......</DIV>Is that violating of adsense TOS?
Simon
2010-01-19 18:25:13
I'm pretty sure. The whole reason they are in iframes is to prevent things like the hosting page accessing the links and just directing the user to them. By including them on the page you're giving too much control to the page owner, whereas in an iframe control stays with Google. I'm not sure about modifying the Adsense code, but most likely it will be a violation of TOS.
Andy E
2010-01-19 19:14:28
A:
are you using any frameworks like jQuery? if so, you could add a click handler to a child of a div:
targetElement = $("#yourDivId").children()[0]
$(targetElement).click(function(){
alert("target element was clicked");
});
darren
2010-01-19 18:16:41
Good point from Andy. If the content is from a foreign domain (in an iframe), this will not work due to the same origin policy.
darren
2010-01-19 18:17:42
ok,if there is no other way that using jQuery I will try with this that You show. Anyway i would like to be simple, so is there any way without jQuery to try?
Simon
2010-01-19 18:23:47
+1
A:
If I would really need to achieve something like this, I would cheat a bit with the user.
Instead of trying to get click on iframe, make an overlay div and place it above iframe. Attach click event to it, and when div is clicked, hide it.
It will give the user feeling that he clicked on link, but it did not worked correctly. The second time he clicks it will already worked, cause overlay is hidden.
An example code (just for explanation purpose):
<html>
<style>
.test {
position : absolute;
top : 0;
left : 0;
width : 300;
height : 300;
z-index : 999;
filter : alpha(opacity = 0);
opacity : 0;
background-color:black;
}
</style>
<script>
function start(){
var div = document.getElementById("target");
var source = document.createElement("div");
source.className = "test";
document.body.appendChild(source);
var style = source.style;
var div2 = document.createElement("div");
document.body.appendChild(div2);
source.onclick = function(e){
style.display = "none";
div.onmouseout = function(){
div2.innerHTML = "mouseout";
style.display = "";
div.onmouseout = null;
}
div2.innerHTML = "clicked";
}
}
</script>
<body onload="start()">
<div id="target">
<iframe src="http://mail.ru" style="width:300;height:300"></iframe>
</div>
</div>
</html>
nemisj
2010-01-20 13:14:48
I wouldn't like the idea of a site making me click a link twice :) Will the mouse pointer change to the correct cursor when hovering over the links?
Andy E
2010-01-21 09:58:52
Well, that's why i called it cheating :) moreover, if i would be unaware user , i think that i would hardly notice this. It still up to you. This is how I would workaround this issue.
nemisj
2010-01-21 11:47:58