cancel onclick event on the table using jquery

Question

Hi,

I added a jquery onclick eventhandler to the table as follows

$('#tableid').bind('click', ClickHandler);

function ClickHandler(event) {

   //here i am checking whether the cell that the user clicked is valid to enter data.
   //if not, I would like to cancel the event.

   e.preventDefault(); //this is not working. the cell that the user clicked still has focus.
   return false; //this is also not working. the cell that the user clicked still has focus.

}

How do I cancel the click event on a table?

Answer 1

Looks like you're calling preventDefault() on the wrong object. The handler takes a parameter "event", but you are using "e".

So your code should be:

$('#tableid').bind('click', ClickHandler);

function ClickHandler(event) {
   event.preventDefault(); // event not e
   return false;
}

EDIT: Sounds like actually want something like stopPropagation(), but in reverse. So rather than a child stopping the event being received by a parent, you are trying to get the parent to stop the child receiving the event in the first place.

I guess you might want something more like this then:

$('#tableid *').bind('click', ClickHandler); // note the * to apply this to all children

function ClickHandler(event) {
   event.preventDefault(); // event not e
   return false;
}

Answer 2

You could display an invisible div on top of the table that canceled the click event. But why would you want a textbox that looks like you can click on it but you actually can't?

You could disable the textboxes inside the table.