473,847 Members | 1,500 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Two onClick events on top of each other...

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="mouseove r" onClick="window .location='xxx' ">
<td><img src="images/edit_icon.png" border="0" title="Rename.. ."
OnMouseOver="th is.className='c ursor';"
onClick="showhi de('rename_form ');">&nbsp;
<DIV ID="rename_form " class="showhide Hidden" 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.

Aug 3 '05 #1
6 9946
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=tr ue;alert(66)">t est</td>
</tr>
</table>

window.event.ca ncelBubble stops the "bubbling" up to the next function.

hope that's what you wanted..

TheGeek

Aug 4 '05 #2
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=tr ue;alert(66)">t est</td>
</tr>
</table>

window.event.ca ncelBubble 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="th is.className='c ursor';"
onClick="showhi de(event, 'rename_form'); ">
and catch it with the showhide() function:

function showhide( e, str ) {
var e = e || window.event;
e.cancelBubble = true;
if (e.stopPropagat ion) e.stopPropagati on();

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

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

<URL:http://www.quirksmode. org/js/events_order.ht ml>
--
Rob
Aug 4 '05 #3
On 2005-08-04 04:00:42 +0100, RobG <rg***@iinet.ne t.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=tr ue;alert(66)">t est</td>
</tr>
</table>

window.event.ca ncelBubble 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="th is.className='c ursor';"
onClick="showhi de(event, 'rename_form'); ">
and catch it with the showhide() function:

function showhide( e, str ) {
var e = e || window.event;
e.cancelBubble = true;
if (e.stopPropagat ion) e.stopPropagati on();

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

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

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


Hi,

Thanks guys, it works now :)

I found that this seems to work-

<img src="images/edit_icon.png" OnMouseOver="th is.className='c ursor';"
onClick="event. cancelBubble = true; showhide('renam e_form');">

What is wrong with this?

What does this bit of Rob's function do? if (e.stopPropagat ion) e.stopPropagati on();


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

Thanks again,

Iain.

Aug 4 '05 #4
Cockroach wrote:
On 2005-08-04 04:00:42 +0100, RobG <rg***@iinet.ne t.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=tr ue;alert(66)">t est</td>
</tr>
</table>

window.event.ca ncelBubble 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="th is.className='c ursor';"
onClick="showhi de(event, 'rename_form'); ">
and catch it with the showhide() function:

function showhide( e, str ) {
var e = e || window.event;
e.cancelBubble = true;
if (e.stopPropagat ion) e.stopPropagati on();

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

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

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

Hi,

Thanks guys, it works now :)

I found that this seems to work-

<img src="images/edit_icon.png" OnMouseOver="th is.className='c ursor';"
onClick="event. cancelBubble = true; showhide('renam e_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.stopPropagat ion) e.stopPropagati on();

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.cancelBub ble = true; in the onClick event seems much
simpler.


Of course - you could just as easily use e.stopPropagati on 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
Aug 5 '05 #5
On 2005-08-05 01:54:59 +0100, RobG <rg***@iinet.ne t.auau> said:
Sticking event.cancelBub ble = true; in the onClick event seems much simpler.


Of course - you could just as easily use e.stopPropagati on 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.stopProp agation)
event.stopPropa gation(); showhide('renam e_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:ho ver {
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.

Aug 8 '05 #6
Cockroach wrote:
On 2005-08-05 01:54:59 +0100, RobG <rg***@iinet.ne t.auau> said:
Sticking event.cancelBub ble = true; in the onClick event seems much
simpler.

Of course - you could just as easily use e.stopPropagati on 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.stopProp agation)
event.stopPropa gation(); showhide('renam e_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:ho ver { [...]
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.infosystem s.www.authoring.stylesheets (aka ciwas).
--
Rob
Aug 9 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
1728
by: Ben | last post by:
Hi, I have a number of images whose src's are changed when a button is pressed. At the moment the href is also changed and the images are opened. However I have a function which opens the images in their own windows. I want to run this for each image using the onClick event of the image. I have all the images and links stored in there own array's. I would like to do the same for the onClick events. I have tried creating an array...
17
4893
by: abs | last post by:
My element: <span onclick="alert('test')" id="mySpan">test</span> Let's say that I don't know what is in this span's onclick event. Is it possible to add another action to this element's onclick event ? I've tried something like this: oncl = document.getElementById('mySpan').onclick oncl = oncl + '\n;alert(\'added\')' document.getElementById('mySpan').onclick = oncl
2
5702
by: Heiko Vainsalu | last post by:
Hi Hope somebody knows how to solve this one. *The Situation* A traditional situation where HTML form inputs are checked... (if simplified then it would look something like this) <form onSubmit="return checkWholeForm(this)">
12
3608
by: gg.WS | last post by:
Hi I have a form with 140 labels. Each label has got an OnClick event that is different for each of these labels. Now I want to use the form as a subform of an other form. For this reason I have to change all OnClick events. e.g =SetDate1(! !btn1Tg11;1) nedds to be changed to = SetDate1(!!!btn1Tg11;1)
5
5857
by: kai | last post by:
Hi, In ASP.NET , what is the difference between OnClick and Click events for a button? Because we have button click event, it can trigger events, why we still need OnClick? Please help. Thanks kai
7
6413
by: Giacomo | last post by:
I work on a page structured like: <h2> ... </h2> <div ="div1" class="show"> ... </div> <h2> ... </h2> <div id="div2" class="show"> ... </div> <h2> ... </h2> <div id="div3" class="show"> ... </div>
11
3038
by: GaryB | last post by:
Hi Guys, I've been battling with this one for hours - I hope that you can help me! My code modifies the <aon a page, from a standard document link into a link with a tailored onclick event. It works perfectly (assigning the correct images and the correct onclick events to the correct <atags):
2
18569
by: =?Utf-8?B?TWFyaw==?= | last post by:
I am writing a control and want to handle an OnClick event on the client-side before then conforming to the postback mechanism. I have got the server-side events working for my OnClick event by adding to the rendered element's OnClick handler using GetPostBackEventReference. How can I provide a client-side onclick handler and then to use the aspnet form submit method such that I can also subscribe to the server-side events too?
2
3022
by: Mike | last post by:
Can someone please explain how onclick works with nested, absolutely positioned div containers? I would expect, when several divs are on top of one another, clicking on them would trigger an onclick event for each div. But it's not working that way. Take a look at the attached file. Clicking in the center of the "orange" div, I would think, would trigger an alert for all five of the divs. In fact, it doesn't even trigger one for the...
0
9892
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9734
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10654
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10347
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9493
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7888
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7061
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5915
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
3168
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.