Clicking a row in a table affects the control

Discussion in 'Javascript' started by Steffan A. Cline, Sep 5, 2007.

  1. 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
    Steffan A. Cline, Sep 5, 2007
    #1
    1. Advertising

  2. Steffan A. Cline

    RobG Guest

    On Sep 5, 1:01 pm, "Steffan A. Cline" <> wrote:
    > 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.


    --
    Rob
    RobG, Sep 5, 2007
    #2
    1. Advertising

  3. in article , RobG at
    wrote on 9/5/07 3:22 AM:

    > On Sep 5, 1:01 pm, "Steffan A. Cline" <> wrote:
    >> 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.
    >
    >

    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, Sep 5, 2007
    #3
  4. in article , RobG at
    wrote on 9/5/07 3:22 AM:

    > On Sep 5, 1:01 pm, "Steffan A. Cline" <> wrote:
    >> 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.
    >

    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
    Steffan A. Cline, Sep 6, 2007
    #4
  5. Steffan A. Cline

    RobG Guest

    On Sep 6, 1:33 pm, "Steffan A. Cline" <> wrote:
    > in article , RobG at
    > wrote on 9/5/07 3:22 AM:
    >
    >
    >
    > > On Sep 5, 1:01 pm, "Steffan A. Cline" <> wrote:
    > >> 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.

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


    --
    Rob
    RobG, Sep 6, 2007
    #5
    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. John Dalberg
    Replies:
    0
    Views:
    378
    John Dalberg
    Dec 20, 2005
  2. misiek
    Replies:
    0
    Views:
    2,278
    misiek
    Feb 20, 2006
  3. phl
    Replies:
    1
    Views:
    4,343
    Martin Jay
    Jun 8, 2006
  4. Aren Cambre

    Control.Visible=false affects CreateChildControls

    Aren Cambre, Nov 15, 2004, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    252
    Aren Cambre
    Nov 15, 2004
  5. Sameeksha
    Replies:
    0
    Views:
    116
    Sameeksha
    Apr 7, 2005
Loading...

Share This Page