Overriding an onclick with another onclick

T

tomlong

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
 
B

bobzimuta

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
 
B

BootNic

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

tomlong

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/
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top