By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,292 Members | 1,642 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,292 IT Pros & Developers. It's quick & easy.

Event bubbling...

P: n/a
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[i];
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 :-P 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.

Mar 27 '07 #1
Share this Question
Share on Google+
2 Replies


P: n/a
On Mar 27, 5:07 pm, "Rasmus Kromann-Larsen" <rasmu...@gmail.com>
wrote:
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[i];
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.
--
Rob

Mar 27 '07 #2

P: n/a
On Mar 27, 3:17 pm, "RobG" <r...@iinet.net.auwrote:
On Mar 27, 5:07 pm, "Rasmus Kromann-Larsen" <rasmu...@gmail.com>
wrote:
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[i];
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.

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

Mar 28 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.