javascript bubbling??? onlick on one div to override another nested or layered??

Can someone tell me why both onclick events are firing when I click on the green box and how I can stop this from happening and allow the top most div to take priority?
<html>
<head>
<title>Untitled Document</title>
</head>

<body>
<div style="height:200px; width:200px; background-color:red; position:relative; z-index:0" onclick="alert('redBox')">
<div style="height:100px; width:100px; background-color:green; position:absolute; z-index:999999999" onclick="alert('GreenBox')">
</div>
</div>
</body>
</html></html>

Open in new window

LVL 3
judsonmusicAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
P1ST0LPETECommented:
If you click on the green <div>, it will fire the "onclick" even of the red <div> as well as it's own, because the green <div> is inside of the red <div>'s area - so your are technically clicking on the red div too.

The way I prevent this in my apps, is to use a global variable, something like this:


var greenClicked = false

function GreenDivClick()
{
    //do whatever processing code....
    greenClicked = true;
}

function RedDivClick(div)
{
    if(!greenClicked)
    {
        //This code does not run if green was clicked
    }
    greenClicked = false;
}


<html>
  <body>
    <div id="red" onclick="RedDivClick(this)">
      <div id="green" onclick="GreenDivClick(this)"></div>
    </div>
  </body>
</html>

Open in new window

P1ST0LPETECommented:
Sorry, had some errors, should look like this:
<html>
  <head>
  <script type="text/javascript">
    var greenClicked = false;

    function GreenDivClick()
    {
        //do whatever processing code....
        greenClicked = true;
    }

    function RedDivClick(div)
    {
        if(!greenClicked)
        {
            //This code does not run if green was clicked
        }
        greenClicked = false;
    }
  </script>
  </head>
  <body>
    <div id="red" onclick="RedDivClick(this)">
      <div id="green" onclick="GreenDivClick(this)"></div>
    </div>
  </body>
</html>

Open in new window

P1ST0LPETECommented:
Still a bit hasty in my above answer.  Correct code should look like this:
<html>
  <head>
  <script type="text/javascript">
    var greenClicked = false;

    function GreenDivClick()
    {
        //do whatever processing code....
        greenClicked = true;
    }

    function RedDivClick()
    {
        if(!greenClicked)
        {
            //This code does not run if green was clicked
        }
        greenClicked = false;
    }
  </script>
  </head>
  <body>
    <div id="red" onclick="RedDivClick()">
      <div id="green" onclick="GreenDivClick()"></div>
    </div>
  </body>
</html>

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.