Event bubbling...

Discussion in 'Javascript' started by Rasmus Kromann-Larsen, Mar 27, 2007.

  1. 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 :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.
    Rasmus Kromann-Larsen, Mar 27, 2007
    #1
    1. Advertising

  2. Rasmus Kromann-Larsen

    RobG Guest

    On Mar 27, 5:07 pm, "Rasmus Kromann-Larsen" <>
    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;
    > 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
    RobG, Mar 27, 2007
    #2
    1. Advertising

  3. On Mar 27, 3:17 pm, "RobG" <> wrote:
    > On Mar 27, 5:07 pm, "Rasmus Kromann-Larsen" <>
    > 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;
    > > 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.
    Rasmus Kromann-Larsen, Mar 28, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. S. Justin Gengo

    Re: Bubbling Event ---- Problem!!!!

    S. Justin Gengo, Jul 20, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    452
    Makarand
    Jul 24, 2003
  2. Barry

    Event Bubbling from a template

    Barry, Aug 7, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    348
    Barry
    Aug 7, 2003
  3. Nathan Sokalski

    Event Bubbling and the ItemCommand Event

    Nathan Sokalski, May 29, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    398
    Nathan Sokalski
    May 29, 2006
  4. Nathan Sokalski

    Event Bubbling and the ItemCommand Event

    Nathan Sokalski, May 29, 2006, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    129
    Nathan Sokalski
    May 29, 2006
  5. Nathan Sokalski

    Event Bubbling and the ItemCommand Event

    Nathan Sokalski, May 29, 2006, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    132
    Nathan Sokalski
    May 29, 2006
Loading...

Share This Page