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.