How do I disable the onclick event

Question

How do I disable the onclick event?
I've tried onclick="this.disabled=true;", but it doesn't work.

Here is an HTML table:

<table>
  <tr>
     <td onclick="parent.location='home.php'">Available</td>
     <td onclick="parent.location='home.php'">Available</td>
  </tr>
  <tr>
     <td onclick="parent.location='home.php'"><div onclick="this.disabled=true;">Booked</div></td>
     <td onclick="parent.location='home.php'">Available</td>
  </tr>
</table>

Using the above code it is still going to home.php, even if i click on the table cell marked `Booked'.

Answer 1

You need to prevent the event from bubbling upwards.. most simple way:

<div onclick="event.cancelBubble = true;">Booked</div>

Tested successfully for IE8, Chrome and Firefox.

Answer 2

you should overwrite the onclick with a function that returns false (as in: "the click is consumed"). So you'd do something like

 onclick="return false;"

wait. i meant false :)

Answer 3

Personally, I think you would be best served to take the 'onclick' off of the TD and place it on the div within it(similar to how you have booked). Then you can decide in your PHP logic whether to put an 'onclick' on the div or leave it off(you wouldn't need to try to override it then).