Clicking a row in a table affects the control

I have a script that will cycle thru a form and add a handler to the row so
that if it is clicked it will check the checkbox within the row with
basically cb.checked = !cb.checked. This part works great except if you
click on the checkbox itself. It will also trigger the row. Am I missing an
obvious way of how to avoid that? Reason, like I was saying. Clicking on the
row toggles the checkbox but if the checkbox is unchecked and you check it,
it will instantly go back to unchecked making the appearance it was never
checked. Hence, it's always unchecked unless you hit the row. I need to come
up with something I can add into the code that looks at the checkbox somehow
to avoid this. It's as if the handler would need to see if it itself was
clicked or the control within it itself (the row).

Advertisements

On Sep 5, 1:01 pm, "Steffan A. Cline" <> wrote:
> I have a script that will cycle thru a form and add a handler to the row so
> that if it is clicked it will check the checkbox within the row with
> basically cb.checked = !cb.checked. This part works great except if you
> click on the checkbox itself. It will also trigger the row. Am I missing an
> obvious way of how to avoid that? Reason, like I was saying. Clicking on the
> row toggles the checkbox but if the checkbox is unchecked and you check it,
> it will instantly go back to unchecked making the appearance it was never
> checked. Hence, it's always unchecked unless you hit the row. I need to come
> up with something I can add into the code that looks at the checkbox somehow
> to avoid this. It's as if the handler would need to see if it itself was
> clicked or the control within it itself (the row).

1. Add a handler to the checkbox that cancels bubbling.

2. In the row handler, see if the target was the checkbox (or its
label) and don't toggle the checked property if it is.

Advertisements

in article , RobG at wrote on 9/5/07 3:22 AM:
> On Sep 5, 1:01 pm, "Steffan A. Cline" <> wrote:
>> I have a script that will cycle thru a form and add a handler to the row so
>> that if it is clicked it will check the checkbox within the row with
>> basically cb.checked = !cb.checked. This part works great except if you
>> click on the checkbox itself. It will also trigger the row. Am I missing an
>> obvious way of how to avoid that? Reason, like I was saying. Clicking on the
>> row toggles the checkbox but if the checkbox is unchecked and you check it,
>> it will instantly go back to unchecked making the appearance it was never
>> checked. Hence, it's always unchecked unless you hit the row. I need to come
>> up with something I can add into the code that looks at the checkbox somehow
>> to avoid this. It's as if the handler would need to see if it itself was
>> clicked or the control within it itself (the row).
>
> 1. Add a handler to the checkbox that cancels bubbling.
>
> 2. In the row handler, see if the target was the checkbox (or its
> label) and don't toggle the checked property if it is.
>
> I think 2. may be the better option.
>
>
Rob,

in article , RobG at wrote on 9/5/07 3:22 AM:
> On Sep 5, 1:01 pm, "Steffan A. Cline" <> wrote:
>> I have a script that will cycle thru a form and add a handler to the row so
>> that if it is clicked it will check the checkbox within the row with
>> basically cb.checked = !cb.checked. This part works great except if you
>> click on the checkbox itself. It will also trigger the row. Am I missing an
>> obvious way of how to avoid that? Reason, like I was saying. Clicking on the
>> row toggles the checkbox but if the checkbox is unchecked and you check it,
>> it will instantly go back to unchecked making the appearance it was never
>> checked. Hence, it's always unchecked unless you hit the row. I need to come
>> up with something I can add into the code that looks at the checkbox somehow
>> to avoid this. It's as if the handler would need to see if it itself was
>> clicked or the control within it itself (the row).
>
> 1. Add a handler to the checkbox that cancels bubbling.
>
> 2. In the row handler, see if the target was the checkbox (or its
> label) and don't toggle the checked property if it is.
>
> I think 2. may be the better option.
>
I changed my control click handler per your suggestions.

myControl.onclick = function (e) {
e.cancelBubble = true;
...
}

This seems to work fine for me in safari and firefox. I haven't checked IE
yet, but is this what you were referring to? Are there any caveats to this?

On Sep 6, 1:33 pm, "Steffan A. Cline" <> wrote:
> in article , RobG at
> wrote on 9/5/07 3:22 AM:
>
>
>
> > On Sep 5, 1:01 pm, "Steffan A. Cline" <> wrote:
> >> I have a script that will cycle thru a form and add a handler to the row so
> >> that if it is clicked it will check the checkbox within the row with
> >> basically cb.checked = !cb.checked. This part works great except if you
> >> click on the checkbox itself. It will also trigger the row. Am I missing an
> >> obvious way of how to avoid that? Reason, like I was saying. Clicking on the
> >> row toggles the checkbox but if the checkbox is unchecked and you check it,
> >> it will instantly go back to unchecked making the appearance it was never
> >> checked. Hence, it's always unchecked unless you hit the row. I need to come
> >> up with something I can add into the code that looks at the checkbox somehow
> >> to avoid this. It's as if the handler would need to see if it itself was
> >> clicked or the control within it itself (the row).
>
> > 1. Add a handler to the checkbox that cancels bubbling.
>
> > 2. In the row handler, see if the target was the checkbox (or its
> > label) and don't toggle the checked property if it is.
>
> > I think 2. may be the better option.
>
> I changed my control click handler per your suggestions.

But you now have more handlers than necessary (probably twice as
many). If you pass the event object to your row.onclick function, you
can inspect the event.target (W3C event model) or event.srcElement (IE
event model) to see where it came from. If it was a form control,
don't do anything - much simpler than cancelling events and it doesn't
interfer with bubbling that might be required for some other purpose.

It also avoids memory leaks in IE that may result from this part of
your function. At the end set:

row = null;

just for good measure.

> myControl.onclick = function (e) {
> e.cancelBubble = true;
> ...
> }
> This seems to work fine for me in safari and firefox. I haven't checked IE
> yet, but is this what you were referring to? Are there any caveats to this?

Share This Page

Welcome to The Coding Forums!

Welcome to the Coding Forums, the place to chat about anything related to programming and coding languages.

Please join our friendly community by clicking the button below - it only takes a few seconds and is totally free. You'll be able to ask questions about coding or chat with the community and help others.
Sign up now!