Two onClick events on top of each other...

[Cockroach]

Hello,

I have a problem where the onClick of a table row will activates a
window.location event, and inside a cell in that row, an image onClick
event shows/hides a div.

The problem is that when you click on the image, it briefly shows the
div, and then reloads the page to the window.location url.

Is there a way of preventing the onClick of the row (<tr>) from doing
it when the image is pressed?

Here is my code:

<tr class="mouseover" onClick="window.location='xxx'">
<td><img src="images/edit_icon.png" border="0" title="Rename..."
OnMouseOver="this.className='cursor';"
onClick="showhide('rename_form');">&nbsp;
<DIV ID="rename_form" class="showhideHidden" STYLE="position:absolute;">
<form action="xxx" method="post">
<input name="name" type="text" maxlength="128" value="xyz">
<input name="submit" type="submit" value="Rename">
</form>
</DIV>
text in that cell
</td>
<td>2</td>
<td>3</td>
</tr>

Any help, even if it is to say "No you can't do it, get rid of the tr
onClick event", would be greatly appreciated.

Thanks,

Iain.

[Peter Schaefer]

You can adapt this little sample I wrote

<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr onclick="alert(99)">
<td onclick="event.cancelBubble=true;alert(66)">test</td>
</tr>
</table>

window.event.cancelBubble stops the "bubbling" up to the next function.

hope that's what you wanted..

TheGeek

[RobG]

Peter Schaefer wrote:

You can adapt this little sample I wrote

<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr onclick="alert(99)">
<td onclick="event.cancelBubble=true;alert(66)">test</td>
</tr>
</table>

window.event.cancelBubble stops the "bubbling" up to the next function.

If the OPs requirement is specifically for IE, then that's OK. But for
any other context, W3C compliant code will be required.

Add 'event' to the call from the onclick:

<img src="images/edit_icon.png" border="0" title="Rename..."
OnMouseOver="this.className='cursor';"
onClick="showhide(event, 'rename_form');">
and catch it with the showhide() function:

function showhide( e, str ) {
var e = e || window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

// ... do stuff with str ...
}

More information on events, bubbling, etc. is here:

<URL:http://www.quirksmode.org/js/events_order.html>
--
Rob

[Cockroach]

On 2005-08-04 04:00:42 +0100, RobG <rg***@iinet.net.auau> said:

Peter Schaefer wrote:

You can adapt this little sample I wrote

<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr onclick="alert(99)">
<td onclick="event.cancelBubble=true;alert(66)">test</td>
</tr>
</table>

window.event.cancelBubble stops the "bubbling" up to the next function.
If the OPs requirement is specifically for IE, then that's OK. But for
any other context, W3C compliant code will be required.

Add 'event' to the call from the onclick:

<img src="images/edit_icon.png" border="0" title="Rename..."
OnMouseOver="this.className='cursor';"
onClick="showhide(event, 'rename_form');">
and catch it with the showhide() function:

function showhide( e, str ) {
var e = e || window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

// ... do stuff with str ...
}

More information on events, bubbling, etc. is here:

<URL:http://www.quirksmode.org/js/events_order.html>

Hi,

Thanks guys, it works now :)

I found that this seems to work-

<img src="images/edit_icon.png" OnMouseOver="this.className='cursor';"
onClick="event.cancelBubble = true; showhide('rename_form');">

What is wrong with this?

What does this bit of Rob's function do? if (e.stopPropagation) e.stopPropagation();

Sticking event.cancelBubble = true; in the onClick event seems much simpler.

Thanks again,

Iain.

[RobG]

Cockroach wrote:

On 2005-08-04 04:00:42 +0100, RobG <rg***@iinet.net.auau> said:

Peter Schaefer wrote:

You can adapt this little sample I wrote

<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr onclick="alert(99)">
<td onclick="event.cancelBubble=true;alert(66)">test</td>
</tr>
</table>

window.event.cancelBubble stops the "bubbling" up to the next function.

If the OPs requirement is specifically for IE, then that's OK. But
for any other context, W3C compliant code will be required.

Add 'event' to the call from the onclick:

<img src="images/edit_icon.png" border="0" title="Rename..."
OnMouseOver="this.className='cursor';"
onClick="showhide(event, 'rename_form');">
and catch it with the showhide() function:

function showhide( e, str ) {
var e = e || window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

// ... do stuff with str ...
}

More information on events, bubbling, etc. is here:

<URL:http://www.quirksmode.org/js/events_order.html>

Hi,

Thanks guys, it works now :)

I found that this seems to work-

<img src="images/edit_icon.png" OnMouseOver="this.className='cursor';"
onClick="event.cancelBubble = true; showhide('rename_form');">

What is wrong with this?

It will only stop events bubbling in IE. It is not consistent with the
W3C event model, so any browser that implements the W3C model will
continue to see the defective behaviour.

What does this bit of Rob's function do?

if (e.stopPropagation) e.stopPropagation();

It stops events from bubbling in those browsers that implement the W3C
event model. The 'if' test is standard feature detection so that IE
does not attempt to execute a method it does not support.

OTOH, adding a 'cancelBubble' property to the event object does no
harm, even in those browsers that don't support it.

It's all in the reference I provided.


Sticking event.cancelBubble = true; in the onClick event seems much
simpler.

Of course - you could just as easily use e.stopPropagation and some
other browser than IE, but you are only supporting one event model
when there are two.

You could also have your tr onclick detect the event target (W3C) or
source element (MS) and if it is the image, ignore it. The basic
problem is that there are two event models and you should support both.

--
Rob

[Cockroach]

On 2005-08-05 01:54:59 +0100, RobG <rg***@iinet.net.auau> said:

Sticking event.cancelBubble = true; in the onClick event seems much simpler.

Of course - you could just as easily use e.stopPropagation and some
other browser than IE, but you are only supporting one event model when
there are two.

You could also have your tr onclick detect the event target (W3C) or
source element (MS) and if it is the image, ignore it. The basic
problem is that there are two event models and you should support both.

Hello,

Thanks again for your help.

I have ended up just doing this:
onClick="event.cancelBubble = true; if (event.stopPropagation)
event.stopPropagation(); showhide('rename_class17_form');

The reason is, I have not only one function that I would need to
correct, and I also had to stick it in the textbox, that appears on top
of the TR in the form.

The only other thing I had a problem with is that I have used the
following for a rollover effect, but it doesn't work in IE.
- - - - -
TR.mouseover:hover {
vertical-align: top;
background-color: #FFFFFF;
font-size: 13px;
}
- - - - -
Also, IE won't centre the main table on the page, it keeps it left.
- - - - -
TABLE.page {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
background-color: #BECBF8;
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
}
- - - - -
I know it is a bit off topic, but hopefully you can help :)

Thanks,

Iain.

[RobG]

Cockroach wrote:

On 2005-08-05 01:54:59 +0100, RobG <rg***@iinet.net.auau> said:

Sticking event.cancelBubble = true; in the onClick event seems much
simpler.

Of course - you could just as easily use e.stopPropagation and some
other browser than IE, but you are only supporting one event model
when there are two.

You could also have your tr onclick detect the event target (W3C) or
source element (MS) and if it is the image, ignore it. The basic
problem is that there are two event models and you should support both.

Hello,

Thanks again for your help.

I have ended up just doing this:
onClick="event.cancelBubble = true; if (event.stopPropagation)
event.stopPropagation(); showhide('rename_class17_form');

That's great, have you considered writing your own 'stopProp()'
function? If this is a one-of, perhaps not worth it but have a think
about it.

The reason is, I have not only one function that I would need to
correct, and I also had to stick it in the textbox, that appears on top
of the TR in the form.

The only other thing I had a problem with is that I have used the
following for a rollover effect, but it doesn't work in IE.
- - - - -
TR.mouseover:hover { [...]
I know it is a bit off topic, but hopefully you can help :)

Yes, it is. You will get much better answers (well, much better than
mine) in comp.infosystems.www.authoring.stylesheets (aka ciwas).
--
Rob