Onclick Disable

Hi All,

I just ran into small issue that maybe some of you can help me on.

Currently I just got my background to be clickable but any link on top of the background ends up opening up the background link and it's own link.

So basically I'm trying to hyperlink the background (which I got working) while avoiding everything within my Frame to make the same JS  onClick Call.
<!--Skin Start-->
<div id="dropshadow" onClick="skintarget()">
 
     <div id="frame"> 
          <!--all body elements are located in this area-->
     </div>
 
</div>
 
 
<!--------- External JS calls --------->
function skinTarget()
{
  fwnd = window.open('http://www.norelco.com');
  fwnd.focus();
}
document.getElementById('dropshadow').onclick=skinTarget;
document.getElementById('dropshadow').style.cursor="pointer";

Open in new window

rurth24Asked:
Who is Participating?
 
bugadaConnect With a Mentor Commented:
In addition, if you can't alter the internal code, for example in case of inlcusion, you can avoid the stobBubble function, adding few lines to your original function. This code will check the id of the originating element so you can execute your code only if you element is the background div.

Remember to add the "e" parameter to the funcion to be cross browser compatibile.


function skinTarget(e)
{
      e = e || window.event;
      var elem = e.target || e.srcElement;
      
      if (elem.id == "dropshadow")  {
          fwnd = window.open('http://www.norelco.com');
          fwnd.focus();
      }
}

Open in new window

0
 
td234Commented:
You would have to add the same onClick method on any elements in the foreground.
0
 
rurth24Author Commented:
td234,

How do you disable the onClick for foreground elements?


<div id="frame"> 
          <!--all body elements are located in this area-->
</div>
 
 
 
function disableTarget()
{
  <!-- disable onclick code -->
}
document.getElementById('frame').onclick=disableTarget;

Open in new window

0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
td234Commented:
You would not disable it, you would have to put elements on top of the background and give them their own onClick. Thus, hiding the background onClick, but you can not selectively disable areas that have an onClick. I would not recommend the method yo have chosen. There is probably a better way to have large areas clickable.
0
 
rurth24Author Commented:
Got any other ideas on how to make backgrounds clickable without effecting foreground elements?

0
 
td234Commented:
0
 
bugadaCommented:
what you're experiencing is called "bubbling". If you dont' want that internal links will execute the onclick event of the container just put the stopBubble() function on their onclick function:


   function stopBubble(e) {
      if (e && e.stopPropagation) 
         e.stopPropagation(); // W3C compliant
      else
         window.event.cancelBubble = true; //IE
   }
 
<div id="dropshadow" onClick="skintarget()">
 
     <div id="frame"> 
         <a href="#" onclick="stopBubble();">AAA</a>
     </div>
 
</div>

Open in new window

0
 
rurth24Author Commented:
Hey bugada,

Thanks for the help...

I tried the code below and it didn't work. I'm still getting norelco site to popup regardless of where I click in the frame.

I also tried a variation of

<div id="frame" onclick="stopBubble();">
<div id="frame" onclick="stopBubble(e);">

I'm about to try the second part you posted... I'll let you know the outcome.
function skinTarget()
{
  fwnd = window.open('http://www.norelco.com');
  fwnd.focus();
}
 
document.getElementById('dropshadow').onclick=skinTarget;
document.getElementById('dropshadow').style.cursor="pointer";
 
function stopBubble(e) {
      if (e && e.stopPropagation) 
         e.stopPropagation(); // W3C compliant
      else
         window.event.cancelBubble = true; //IE
   }
 
<!------------------------------------------>
 
<div id="dropshadow" onclick="skinTarget();">
            <div id="frame" onclick="stopBubble();">

Open in new window

0
 
rurth24Author Commented:
The second piece of code you posted seems to work but I haven't tested it across all browsers yet.. more to come.

Thanks again.
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.