Event bubbling...

[Rasmus Kromann-Larsen]

Hey,

Messing with JavaScript on a webpage, I ran into a small problem.
Wanting to have a table cell select it's contained radiobutton in a
rather non-specific way, I wrote the following JavaScript:


function click_it(element)
{
var x = element.childNodes

for(var i=0;i<x.length;x++)
{
var tag = x;
if(!tag.tagName || tag.tagName != "INPUT")
continue;

tag.checked = !tag.checked;
}
}


It works fine for clicking the table cell and selecting contained
radiobuttons. However, when actually clicking the radiobutton, the
browser decides (correctly) to first fire the internal radiobutton
click event, thus selecting the radiobutton - and THEN fireing the
click handler for my table cell, thus de-selecting it again If
this was to only work for radiobuttons, I could easily make it do
"tag.checked = 1" every time, but it needs to work for checkboxes too,
so the de-select should work too (if checked).

I also realize I'd have problems with other "input" elements, but that
isn't related to this problem

I figured it'd be a rather typical problem, but didn't find a solution
in my searches for it, so I decided to post here.


Thanks in advance,
- Rasmus.

 

[RobG]

Hey,

Messing with JavaScript on a webpage, I ran into a small problem.
Wanting to have a table cell select it's contained radiobutton in a
rather non-specific way, I wrote the following JavaScript:

function click_it(element)
{
var x = element.childNodes

for(var i=0;i<x.length;x++)
{
var tag = x;
if(!tag.tagName || tag.tagName != "INPUT")
continue;

tag.checked = !tag.checked;
}

}

It works fine for clicking the table cell and selecting contained
radiobuttons. However, when actually clicking the radiobutton, the
browser decides (correctly) to first fire the internal radiobutton
click event, thus selecting the radiobutton - and THEN fireing the
click handler for my table cell, thus de-selecting it again

You have two options:

1. Add an onclick to the radio button to stop the event bubbling up,
but that doubles the number of onclick functions.

2. Use the event object passed to your click_it function to see if the
click came from a radio button. If so, do nothing. If not, use your
current function to toggle the checked property.

 

[Rasmus Kromann-Larsen]

Hey,

Messing with JavaScript on a webpage, I ran into a small problem.
Wanting to have a table cell select it's contained radiobutton in a
rather non-specific way, I wrote the following JavaScript:

function click_it(element)
{
var x = element.childNodes

for(var i=0;i<x.length;x++)
{
var tag = x;
if(!tag.tagName || tag.tagName != "INPUT")
continue;

tag.checked = !tag.checked;
}

It works fine for clicking the table cell and selecting contained
radiobuttons. However, when actually clicking the radiobutton, the
browser decides (correctly) to first fire the internal radiobutton
click event, thus selecting the radiobutton - and THEN fireing the
click handler for my table cell, thus de-selecting it again

You have two options:

1. Add an onclick to the radio button to stop the event bubbling up,
but that doubles the number of onclick functions.

2. Use the event object passed to your click_it function to see if the
click came from a radio button. If so, do nothing. If not, use your
current function to toggle the checked property.

Thanks for the reply Rob. I went with solution 1 I tried with
solution 2, but it didn't readily work for me, so I just went back to
what I'd figured out.

Thanks,
- Rasmus.