Ask Ben: Using jQuery To Act On A Click Event Based On The Target Element

Hi Ben, How can I disable the click event of a parent element? In my code, I have attached a click event to a row ('<tr>'), however, one of the <td> elements part of the row contains a checkbox. When clicking on a checkbox, I don't want the click event to be performed. How can I disable the click event on the <tr> element? One thing I tried to do is to bind the click event to the non-checkbox <td> elements, however, I didn't manage to make it work yet. Maybe you have a clue or some genius tip :)?

What you are dealing with here is a byproduct of event bubbling within the Document Object Model (DOM). When the user clicks your checkbox, the click event is being responded to by the checkbox, resulting in the toggling of the checkbox. After that, the browser (with jQuery's help) then bubbles that click event up through the node tree, triggering the click event on each of the ancestor nodes. One of those ancestors, as you are experiencing, is the TR that contains the checkbox.

One way to prevent this would be to capture the click event on the checkbox and prevent it from bubbling up through the DOM. This is exactly what jQuery's event.stopPropagation() method is used for. However, to do that, we would have to bind click event handlers on all of the checkboxes, which adds a bunch of unnecessary event bindings (which can have both a performance and philosophical cost).

You might be tempted to try and use jQuery's live() event binding to counteract the cost of individual event bindings; however, because live() depends on event propagation, you'll be reacting to the click event on the checkbox after the TR has already reacted to it. As such, you might be able to prevent the default behavior (toggling the checkbox), but you won't be able to stop the event propagation.

To trap the checkbox click event without worrying about binding a click event handler directly to every checkbox, we can add some logic to our TR click event handler. When an event is triggered on a given element, the event object contains two targets: "target" and "currentTarget". The currentTarget is the element on which the event is currently being triggered; this will change as the event bubbles up through the DOM. The target, on the other hand, is the element that triggered the original event; this will always be the same as the event propagates.

Keeping this in mind, we can add some conditional logic to our TR click event handler that examines the event target. If the target element is the checkbox (or the edit input field in my demo), then we are going to treat these as special cases and simply exit out of the TR event handler. To see this in action, take a look at my demo page:

I know this demo is way more complicated than it has to be - I was just trying to mimic what I thought you were trying to do based on the code that you sent me (so that it might be more meaningful). The key part to take away is the IF statement at the top of our TR click event handler:

If the target element that triggered the original event is the checkbox or the input, then our event handler simply exits out. In this way, we are capturing the checkbox click event without having to actually bind an event handler to the checkbox. And, if you think about it, this makes the most sense - only the TR cares about the checkbox click; the checkbox itself really couldn't care less.

Anyway, I hope this helps point you in the right direction.

What Other People Are Searching For

[ local search ] event delegation in jquery