Clicking a row in a table affects the control

[Steffan A. Cline]

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

Any ideas?
Thanks

Steffan

[RobG]

On Sep 5, 1:01 pm, "Steffan A. Cline" <[e-mail]:

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

[Steffan A. Cline]

in article 11**********************@k79g2000hse.googlegroups. com, RobG at
rg***@iinet.net.au wrote on 9/5/07 3:22 AM:

On Sep 5, 1:01 pm, "Steffan A. Cline" <[e-mail]:

>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,

Have an example of either?

Here is what I current an using to add the handler to the row
row.onclick = function () {
var x = getControl(this);
if( x )
{
switch( x.type )
{
case( "radio" ) : this.style.backgroundColor = selectedColor;
x.checked = true;
break;
case( "checkbox" ): x.checked = !x.checked;
this.style.backgroundColor = ( x.checked ?
selectedColor : unselectedColor );
break;
case( "select" ) : // non standard
case( "select-multiple" ):
case( "select-one" ) : this.style.backgroundColor = (
x.selectedIndex ? selectedColor : unselectedColor );
break;
}
formWasChanged = true;
setTotal();
}
}

I've been thinking on your ideas as they were what I knew I needed to do but
couldn't think of how.

Thanks

Steffan

[Steffan A. Cline]

in article 11**********************@k79g2000hse.googlegroups. com, RobG at
rg***@iinet.net.au wrote on 9/5/07 3:22 AM:

On Sep 5, 1:01 pm, "Steffan A. Cline" <[e-mail]:

>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?

Thanks,

Steffan