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]

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.

 

[Steffan A. Cline]

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]

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

 

[RobG]

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.

Also, your method if attaching handlers is quite inefficient, consider
using a function declaration and assigning a function reference,
something like:

function rowClickToggle(e) {
var e = e || event;
var target = e.target || e.srcElement;

// Make sure target isn't a text node or similar
while (target.nodeType != 1) {
target == target.parenNode;
}

var tagName = target.tagName.toLowerCase();

// Filter out form controls
if (tagName == 'input' || tagName == 'select' ||
tagName == 'textarea' || tagName == 'button' ) {
return;
}

// Click didn't come from a form control, do stuff...

}

adding the row handler becomes:

row.onclick = rowClickToggle;


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?

Read:

<URL: http://www.quirksmode.org/js/events_order.html >