Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Event bubbling...

Reply
Thread Tools

Event bubbling...

 
 
Rasmus Kromann-Larsen
Guest
Posts: n/a
 
      03-27-2007
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 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.

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      03-27-2007
On Mar 27, 5:07 pm, "Rasmus Kromann-Larsen" <(E-Mail Removed)>
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

 
Reply With Quote
 
 
 
 
Rasmus Kromann-Larsen
Guest
Posts: n/a
 
      03-28-2007
On Mar 27, 3:17 pm, "RobG" <(E-Mail Removed)> wrote:
> On Mar 27, 5:07 pm, "Rasmus Kromann-Larsen" <(E-Mail Removed)>
> 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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
image button click event fires before click event of button Purvi T ASP .Net 0 10-19-2004 06:19 AM
Catching a RequiredFiled Validator event in PageLoad or some other event? Lars Netzel ASP .Net 3 07-22-2004 10:48 PM
Button.Init? how Do I know if click event has been fired? TextBox.TextChanged event before Button.Click in a CompositeCustomControl. jorge ASP .Net 2 05-25-2004 11:45 PM
PreRender Event occurs immediatley after Load event =?Utf-8?B?QWxpcmV6YSBaaWFp?= ASP .Net 1 02-09-2004 10:19 AM
Event On Form From Control Event Dave Wurtz ASP .Net 1 12-09-2003 10:37 PM



Advertisments