How to maintain onclick event for div beneath another div
I have a div which has an onclick event assigned and that works. I placed another div after the first one (on top of it) so as to hide some of the first div. Like a skin if you like. The 2nd or top div has transparent sections (this is a .png file). So when I try to click on the image underneath (the bottom div) it won't trigger my javascript function.
I thought that transparent images let you click on items beneath them? How would I go about solving this issue. I need the outer or top div to hide some of the lower div as it is a skin or frame (for a carousel). Is this possible?
I thought that transparent images let you click on items beneath them? How would I go about solving this issue. I need the outer or top div to hide some of the lower div as it is a skin or frame (for a carousel). Is this possible?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
U can use eventListner to prevent these this for example
ucan refer this link to better understanding of eventListners..
http://www.howtocreate.co.uk/tutorials/javascript/domevents
ucan refer this link to better understanding of eventListners..
http://www.howtocreate.co.uk/tutorials/javascript/domevents
<html>
<head>
<script language="javascript" type="text/javascript">
function addEventSimple(obj,evt,fn) { // asign eventHandlers
if (obj.addEventListener)
obj.addEventListener(evt,fn,false);
else if (obj.attachEvent)
obj.attachEvent('on'+evt,fn);
}
function removeEventSimple(obj,evt,fn) {//remove eventHandlers
if (obj.removeEventListener)
obj.removeEventListener(evt,fn,false);
else if (obj.detachEvent)
obj.detachEvent('on'+evt,fn);
}
function perventEventFlow(event){
if( typeof event.target != "undefined"){
event.stopPropagation();
event.preventDefault();
alert(event.target.id)
}
else if(typeof event.srcElement != "undefined"){
event.cancelBubble = true;
event.returnValue = false;
alert(event.srcElement.id)
}
}
window.onload=function(){
document.getElementById("div1").onclick = function(){alert(this.id)}
document.getElementById("div2").onclick = function(){alert(this.id)}
addEventSimple(document.getElementById("div3"), "click", perventEventFlow);
addEventSimple(document.getElementById("div3"), "click", perventEventFlow);
}
</script>
</head>
<body>
Div with no eventlistner
<br/>
<div id="div1" style="border:1px solid black; padding:5px;width:200px;height:200px;" >
<div id="div2" style="border:1px solid black; padding:5px;width:100px;height:100px;"></div>
</div>
<br/><br/><br/>
Div with no eventlistner
<div id="div3" style="border:1px solid black; padding:5px;width:200px;height:200px;" >
<div id="div4" style="border:1px solid black; padding:5px;width:100px;height:100px;"></div>
</div>
</body>
</html>
ASKER
Thanks for the idea and sample code. You were absolutely correct in saying that the bottom div can not receive focus and/or accept an onlick event. In this case, I solved it by cutting up the image and placing all the pieces into separate divs that did NOT overlap the underlying div image so I am able to run onclick events now. Thanks for the heads up.
glad you solved it. A piecemeal overlay is probably the best solution to this. I thought of that, but did not want to suggest it, because of complexity. Glad you took the bull by the horns !!
ASKER