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?
LVL 20
Mark BradyPrincipal Data EngineerAsked:
Who is Participating?
 
scrathcyboyConnect With a Mentor Commented:
The problem is not necessarily the images, but the DIVs.  When one DIV is on top of another, the bottom one is out of focus -- so no onClick functions in it will work.  

Have you tried getting the 2nd image out of a DIV and simply use javascript to place it over the other image?
"I thought that transparent images let you click on items beneath them?"  
If true, this should work.
0
 
Mark BradyPrincipal Data EngineerAuthor Commented:
Hmmm do you have a small example using javascript? That might work.
0
 
manjunathubCommented:
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
<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>

Open in new window

0
 
Mark BradyPrincipal Data EngineerAuthor Commented:
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.
0
 
scrathcyboyCommented:
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 !!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.