...
PDA

Appending table rows

ellisd5
10-10-2008, 10:33 AM
Hello all,

I have a TD which looks like this...

<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
Kor
10-10-2008, 04:20 PM
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:

<!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>
ellisd5
10-15-2008, 11:09 AM
Thanks very much KOR, finally got around to trying it out and that worked perfectly so thanks!

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum