Disable the onclick event of a parent element

Question

Let\'s say I have an element with an onclick event, and another element inside it, how do I disable the onclick for the child element?

Example:

Answer 1

You can have an onClick for the checkbox that sets the h3.onClick property to blank if the box is checked, and sets it to the correct function reference if it is not checked.

Answer 2

Your handler (the "do something"-part of the h3-tag) can check the tagName of the originating element:

var origin = event.srcElement || event.target;
if (origin.tagName && origin.tagName.match(/h3/i)){
  // do things
} else {return true;}

Now for the checkbox the click handler is triggered, but nothing will happen. Alternatively, you could supply the h3-tag with a unique id an check the id of the clicked element.

Answer 3

http://www.quirksmode.org/js/events_order.html

See stopPropagation()

Answer 4

Can I suggest this anwser I provided in a similar problem?

Above I copied my original answer:

---

I had a very similar problem to your first question. But instead a <div> and a checkbox it was a table. Look at my NON WORKING code:

<table>
  <tr onClick="alert('I expect this alert when Cell_1 or Cell_2 are clicked but not Cell_3')">
    <td>Cell_1</td>
    <td>Cell_2</td>
    <td onClick="alert('I expect this alert only when Cell_3 is clicked')">Cell_3</td>
  </tr>
<table>

Clicking on Cell_1 or Cell_2, my code works as I expected, but when clicking on Cell_3 not, because it showed 2 alerts.

The first one was:

"I expect this alert only when Cell_3 is clicked"

and the second one was:

I expect this alert when Cell_1 or Cell_2 are clicked but not Cell_3.

Google-ing how I could manage that, I found this briliant post on Quirksmode.

Well, putting it simply, I could solve the puzzle this way:

<table>
  <tr onClick="alert('I expect this alert when Cell_1 or Cell_2 are clicked but not Cell_3')">
    <td>Cell_1</td>
    <td>Cell_2</td>
    <td onClick="Cell_3Alert(event)">Cell_3</td>
  </tr>
<table>

And the Javascript:

function Cell_3Alert(e) {
  alert('I expect this alert only when Cell_3 is clicked');

  if (!e) var e = window.event; 
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
}

I've tested and it worked on FireFox 3.6+, IE6+ and Chrome.

Hope it Helps!

Answer 5

Javascript events are propagated bottom-up, i.e if you click on a button, all ascendants recieve the onclick event in orderly fashion, except for when one of them intercepts it via stopPropagation (or returns true, meaning i handled this)

Example :

<h3 onclick="do something"><input type="checkbox" name="child" onclick="return false;" /> text</h3>

you could also bind onclick of parent to a function :

function onlick_handler(e)
{
   e.stopPropagation(); //this event would propagate to parents of this object which are clicked as well
   // the rest here
}