Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder ellisd5's Avatar
    Join Date
    Jun 2002
    Location
    Uk
    Posts
    160
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Appending table rows

    Hello all,

    I have a TD which looks like this...

    Code:
    <TD onMouseover='highlightCell(true);' onMouseout='highlightCell(true);' onClick='loadLink();'>
        <TABLE>
        <TR>
            <TD>img icon</TD>
            <TD><A HREF=''loadLink();'>My Link</A></TD>
            <TD><A HREF='deleteLink();'>delete icon</A></TD>
        </TR>
        </TABLE>
    </TD>
    This code has been simplified, what it is, is a link, with a trash can icon at the end of it. If you click on the text or anywhere in the cell it loads your link, if you click the trashcan then deletes the link. This code works fine in IE. The problem is in firefox, if I click on the delete icon, deleteLink() is called but loadLink() is also called. how can I stop the TD's onclick event getting called when I click on the delete icon inside the TD?

    TIA
    Dale
    Dale Ellis
    __________________

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    This is due to the fact that IE and DOM compliant browsers (Firefox, Opera...) use different event models. When a parent and his child have an event handler for the same event, IE considers that the event as bubbling (first is the child), while DOM model considers both bubbling and capturing in both senses depending on which element is "touched" first.

    By short, you must cancel the the propagation of the events, at least in the bubbling phase. Here's an example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function loadLink(e,element){
    !e?e=window.event:null;
    e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
    alert('loadLink | '+element);
    }
    function deleteLink(e){
    !e?e=window.event:null;
    e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
    alert('deleteLink');
    }
    </script>
    </head>
    <body>
    <table width="300" border="1" cellspacing="1" cellpadding="0">
      <tr>
        <td onclick="loadLink(event,'cell')">click here
    	<table width="200" border="1" cellspacing="1" cellpadding="0">
      <tr>
        <td>
    	<a href="#" onclick="loadLink(event,'link');return false">My Link</a>
    	<br>
    	<br>
    	<a href="#" onclick="deleteLink(event);return false">Delete icon</a>
    	</td>
      </tr>
    </table>
    	</td>
      </tr>
    </table>
    
    </body>
    </html>
    Last edited by Kor; 10-10-2008 at 04:28 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • The Following 2 Users Say Thank You to Kor For This Useful Post:

    Basscyst (10-10-2008), ellisd5 (10-15-2008)

  • #3
    Regular Coder ellisd5's Avatar
    Join Date
    Jun 2002
    Location
    Uk
    Posts
    160
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks very much KOR, finally got around to trying it out and that worked perfectly so thanks!
    Dale Ellis
    __________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •