Nested javascript onmousedown events

Question

I would like different nested onmousedown events. For example, consider the following code:

<div id="parent" onmousedown="foo();">
  <div id="child1"> </div>
  <div id="child2"> </div>
  <div id="child3" onmousedown="bar();"> </div>
</div>

I'd like it so that clicking on any area that's inside the parent div, including child1 and child2, would result in foo() being called, and if child3 is clicked then bar() should be called instead.

My attempts so far have shown that the example above would call foo() when child3 is clicked, which isn't what I want.

Answer 1

In your HTML:

<div id="parent" onmousedown="foo();">
  <div id="child1"> </div>
  <div id="child2"> </div>
  <div id="child3" onmousedown="bar(event);"> </div>
</div>

In javascript

function bar(event)
{
    // usual bar stuff
    event.stopPropagation();
}

Answer 2

<script type="text/javascript">

function bar(evt) {
  // Your stuff here
  if (typeof evt.stopPropagation != "undefined") {
    evt.stopPropagation();
  } else {
    evt.cancelBubble = true;
  }
}

</script>

<div id="parent" onmousedown="foo();">
  <div id="child1"> </div>
  <div id="child2"> </div>
  <div id="child3" onmousedown="bar(event);"> </div>
</div>