By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,327 Members | 2,627 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,327 IT Pros & Developers. It's quick & easy.

Overriding an onclick with another onclick

P: n/a
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 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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

Jan 26 '06 #2

P: n/a
> "to*****@gmail.com" <to*****@gmail.com> wrote:
news:11**********************@g47g2000cwa.googlegr oups.com....

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*

Jan 26 '06 #3

P: n/a
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/domr...vent_ref4.html
http://msdn.microsoft.com/workshop/a...ncelbubble.asp

Thanks!
Tom Longson (nym)
http://igargoyle.com/

Jan 26 '06 #4

P: n/a
Whoops, it's actually event.cancelBubble, not window.cancelBubble.

A good tutorial on this subject can be found here:
http://www.huntingground.freeserve.c...ncelbubble.htm

Jan 26 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.