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'.

Solution 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.

Solution 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 :)