Overriding an onclick with another onclick

Discussion in 'Javascript' started by tomlong@gmail.com, Jan 25, 2006.

  1. Guest

    Hi,

    I have a tabular form that each TR has an onclick event to edit the
    row. I also have a div in one of the cells on each row that is a delete
    button. My problem is that both onclicks are being fired when I click
    on the delete div-button, and as a result the item is getting deleted,
    then is opened up for editing.

    How do I prevent the TR onclick from happening when the delete button
    is used?

    Thanks!
    Tom
     
    , Jan 25, 2006
    #1
    1. Advertising

  2. bobzimuta Guest

    Without having taken any time to research this, I think you need to
    call the cancelBubble function. I think

    window.event.cancelBubble = true for the IE event model
    and
    event.preventDefault() or event.stopPropogation() for mozilla

    or try returning false from the event function.

    if that doesn't help, trying googling for javascript event propagation
     
    bobzimuta, Jan 25, 2006
    #2
    1. Advertising

  3. BootNic Guest

    > "" <> wrote:
    > news:....
    >
    > Hi,
    >
    > I have a tabular form that each TR has an onclick event to edit the
    > row. I also have a div in one of the cells on each row that is a
    > delete button. My problem is that both onclicks are being fired
    > when I click on the delete div-button, and as a result the item is
    > getting deleted, then is opened up for editing.
    >
    > How do I prevent the TR onclick from happening when the delete
    > button is used?


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <script type="text/javascript">
    var gt=0;
    function nef(x){
    if(!gt){
    alert('do something')
    }
    else{
    x.parentNode.removeChild(x);
    gt=0;
    }
    }
    </script>
    <title></title>
    </head>
    <body>
    <table summary="">
    <tr onclick="nef(this)">
    <td>something 0</td>
    <td><button onclick="gt=1">delete</button></td>
    </tr>
    <tr onclick="nef(this)">
    <td>something 1</td>
    <td><button onclick="gt=1">delete</button></td>
    </tr>
    </table>
    </body>
    </html>

    --
    BootNic Wednesday, January 25, 2006 11:43 PM

    When I was young, I was put in a school for retarded kids for two years before they realized I actually had a hearing loss...and they called ME slow!
    *Kathy Buckley*
     
    BootNic, Jan 26, 2006
    #3
  4. Guest

    Actually using the cancelBubble was much easier than what you
    suggested, even though your way would have worked as well.

    Here's a snippet of how it works:

    <tr onclick="doSomething();">
    <td>Tron 2.0</td>
    <td>
    <div onclick="window.cancelBubble=true;deleteItem();">
    <img src="trashIcon.gif" />
    </div>
    </td>
    </tr>

    So pretty simple really. Based on these documents, it looks like it
    hits MSIE/Moz:

    http://www.mozilla.org/docs/dom/domref/dom_event_ref4.html
    http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/cancelbubble.asp

    Thanks!
    Tom Longson (nym)
    http://igargoyle.com/
     
    , Jan 26, 2006
    #4
  5. Guest

    , Jan 26, 2006
    #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. =?Utf-8?B?U2VkZWY=?=

    overriding client-side onclick of Button

    =?Utf-8?B?U2VkZWY=?=, Feb 19, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    747
    Peter Blum
    Feb 21, 2004
  2. bob
    Replies:
    3
    Views:
    188
  3. Kevin Lyons
    Replies:
    2
    Views:
    572
    Mike Foster
    Jul 27, 2004
  4. Replies:
    2
    Views:
    259
  5. VA

    Overriding a href using onClick

    VA, Oct 31, 2005, in forum: Javascript
    Replies:
    5
    Views:
    246
    Mick White
    Oct 31, 2005
Loading...

Share This Page