Prevent child elements from firing parent element 'onclick' event

This question does not appear to be directly related to the Ajax Client framework. However, I am asking it here because a) there is actually heavy use of Ajax in the real life issue, but it is not necessary to explain this to illustrate the problem and b) it is JavaScript related, and where better to find an answer to such a question than on this forum, with so many hardcore JavaScript experts visiting?

So, I hope you'll forgive the apparently off-topic nature of this post.


I have made the rows of a Gridview clickable. I have a hidden 'Select' button in each row, and in the code behind RowDataBound event I steal the JavaScript from this button and apply it as an 'onclick' attribute for the entire row.

In the resulting HTML, there is a TR element generated for each Gridview row. This TR element has the 'onclick' attribute, containing the necessary JavaScript to do a row 'Select' postback. If I now click anywhere in the TR element (i.e. anywhere in the Gridview row), the 'onclick' event is fired and a 'Select' postback occurs.

This is exactly what I want to happen, except for one instance. One of the Gridview row Cells (which corresponds to a TD element in the resulting markup) contains an <asp:HyperLink> control. When the user clicks on this HyperLink, a new window opens as it should. However, the 'onclick' event for the entire row also fires and the Gridview row ends up being selected.

As the <A HREF> element resulting from the HyperLink control is within the TR element which has the 'Select' onclick attribute, this onclick event is fired. I want to know how I can stop this.

To put it succinctly:
- I have a TR element with an 'onclick' attribute.
- I have an <A HREF> within the DOM hierarchy descending from the TR element.
- How can I stop the TR element 'onclick' attribute firing when I click on the <A HREF> link?

I've tried setting the 'onclick' event of the <A HREF> element to nothing, but it makes no difference.

A solution I have found is to replace the HyperLink control with a LinkButton control. I give the LinkButton an 'onclick' attribute which does a '' with the appropriate link. So the resulting behaviour is just like the HyperLink. But using a LinkButton involves a postback (albeit a dummy postback which does nothing at all other than reload the page), which wastes server resources and bandwidth. I could whack the LinkButton into an UpdatePanel to minimise this, but it still seems like overkill to me. And it would mean an UpdatePanel for each Gridview row, which is a lot of extra script for so simple a purpose.

So... any thoughts on this would be very much appreciated.


8/28/2007 11:07:28 PM 9760 articles. 0 followers. Follow

3 Replies

Similar Articles

[PageSpeed] 59

You should just be able to cancel the "bubble" event... see

The code you want is in the section "Turning it off":

 if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();


Visoft, Inc - Home | Blogs

Latest Blog Post: SQL 2008 x64 and VS2008 SP1
8/29/2007 12:49:54 AM

Thank you very much. That is exactly the information I was looking for. I have to say, the more I find out about JavaScript the more impressed I am with it.

As well as solving the issue I had that is a very interesting read and I've bookmarked it for future reference.

Thanks again for your help, much obliged...

8/29/2007 3:46:31 PM

Sorry to raise the dead on this post, but I was hoping thats someone could help me zero-in on a similar issue:

I have some javascript that is programmatically creating an HTML <input> element within the aspx <Form> tag.  The javascript is handling a onkeypress event of that <input> element, and populating another textarea with some text returned by a web service.  By the way, all of this works fine, when the javascript is OUTSIDE of the <Form>.  However, when inside the aspx <Form> take, a postback is fired whenever I press Enter when inside the <Input> element.  To be precise, the javascript handler fires first, and then the postback happens.

I'm trying to figure out how to prevent bubbling to to the <Form>, to stop the postback in this case.  I've tried the example above, but so far I've not been able to locate the correct place in the DOM to put the "stop bubbling" event handler.

Help appreciated.


Beer John
myOSity Project Website, Blog
7/14/2008 6:41:21 PM

Similar Artilces:

The element 'system.web.extensions' has invalid child element 'dynamicData'. List of possible elements expected: 'scripting'.
I create a new fresh DynamicDataWebSite, made no modifications.  When the web.config is open I get the following warning in the error list Warning 1 The element 'system.web.extensions' has invalid child element 'dynamicData'. List of possible elements expected: 'scripting'. c:\***\DynData\DynamicDataWebSite\web.config 117 4 DynamicDataWebSite I'm not sure how to proceed. When I attempt to run the default project (I have made NO modifications) I get the following error: Server Error in '/' Application. The Dynam...

Warning: element 'compilation' has invalid child element 'compilers'
All-- Please help. I am getting a strange warning in my Web.config file. This is the warning... Warning 1 The element 'compilation' has invalid child element 'compilers'. List of possible elements expected: 'assemblies, buildProviders, codeSubDirectories, expressionBuilders'. C:\hosting\webhost4life\member\mkamoski\S07\web.config 25 5 C:\...\S07\ This is the element... <compilation defaultLanguage="c#" debug="true">   <compilers>     <compiler language="c#" type="Microsoft.CSharp.CSharpCodeProvider, System, Version...

Web.config warning: The element 'compilation' has invalid child element 'compilers'.
After migrating my ASP.NET 1.1 project to 2.0, I have the following warning:         The element 'compilation' has invalid child element 'compilers'. List of possible elements expected: 'assemblies, buildProviders, codeSubDirectories, expressionBuilders'. I read in another post that it is not necessary.  Is this correct?  Should I remove it?  I ask because in that post, the poster made it sound as though they already had that section in their web.config.  I did not, the wizard added it to my web.config.  So I don't understand why ...

AJAX version 1.0 working, but I'm getting Element 'ScriptManager' is not a known element.
So I installed version 1.0 beta and updated the changes on one of my sites, from the Atlas CTP. The problem I'm having is that while the site seems to function correctly, I'm getting the error below for the asp:ScriptManager and asp:UpdatePanel and intellisense is not working for the AJAX controls in Visual Studio 2005 for the project. Element 'ScriptManager' is not a known element. This can occur if there is a compilation error in the Web site.   However, I just created a new ASP.NET AJAX-Enabled web site and the intellisense works for ...

element 'system.web' has invalid child element
i have created new custom provider from ProviderBase class and also created a service class that uses this provider. Im trying to register this service in web.config but i ger error saying"element 'system.web' has invalida child element". Here is how my web.config file looks. Check the <loggingService> section which i'm trying to register.  <configuration> <configSections> <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=, Culture...

Error encrypting 'identity' element and not 'appSettings' element in web.config
  All,I'm using RSA Protected Configuration provider and the aspnet_regiis.exe tool to encrypt section of my web.config file. I can successfully encrypt 'appSettings' using C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727>aspnet_regiis.exe -pe "appSettings" -app "/AppName"however the similar command when used with 'identity' C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727>aspnet_regiis.exe -pe "identity" -app "/AppNAme" gives me the below message ""Encryp...

Validation (Internet Explorer 6): Element 'input' cannot be nested within element 'tr'
Hi All, I have migrated my ASP.NET 1.1 application to ASP.NET 2.0. I'resolved all errors but following HTML errors are still persisting. Please help me for resolving it. ERRORS:  1. Validation (Internet Explorer 6): Element 'input' cannot be nested within element 'tr'  2.  Validation (Internet Explorer 6): Attribute ;ondrop. is not a valid attributr of element 'iFrame'  3. Validation (Internet Explorer 6): Element PAGERSTYL is not supported  4. Validation (Internet Explorer 6): Element COLUMN is not supported  5. Validat...

Validation (XHTML 1.1): Element 'br' cannot be nested within element 'form'
This is not hindering progress in any way but I don't know why Visual Studio is doing this. I have an .aspx page (child to a master page) that indicates certain valid tags are invalid. I get the following mouseover message:"Validation (XHTML 1.1): Element 'br' cannot be nested within element 'form'."This doesn't make sense to me, anchor and break tags are always valid within a form. Here's the simple page code (the error remains even after I have simplified it as such): 1 <%@ Page Language="VB" AutoEventWireup="false" CodeFile=&...

Cannot wrap 'Element''s 'addEventListener' method
On Firefox ( v2 and v3, and probably the earlier versions) it does not seem possible, at least under some circumstances, to extend the 'addEventListener' prototype of the 'Element' object in JS or to extend the prototype of its inheriting objects. This forces JavaScript frameworks that would like to leverage Element's prototype for this (or its inheriting objects) to treat Firefox like IE in this case -- they have to perform an extension operation on every single individual dom element that they need framework-style behavior from. That's a significant performan...

Element 'Repeater' is not a known element.
Hello All,  I get the following error on one of my content pages ...Element 'Repeater' is not a known element. This can occur if there is a compilation error in the Web site I also receive this error for other tags such as Element 'UpdatePanel' is not a known element. This can occur if there is a compilation error in the Web.  I have no problems on other content pages and can't seem to understand what is going on.   Any suggestions?  The page actually displays perfectly, but since it has these errors the intellisense in the aspx page is not...

Element 'AccordionPane' is not a known element
I was wondering if someone can help me on a problem I'm having with a new AJAX project.I open VS and Create a new Web Site using the ASP .NET AJAX-Enabled Web Site template.In default.aspx there is a form tag, then a ScriptManager tag, then a Div.I drag an Accordion control inside the div and run it.  It runs fine so far.Then, I drag an AccordionPane control inside the Accordion control and i get this error:"Element 'AccordionPane' is not a known element. This can occur if there is a compilation error in the Web site."That's all I did. Any ideas? I run the AjaxControlToolkit sample just...

element 'scriptmanager' is not a known element
I know this is an old problem but after searching for solutions it persists. I am using Visual Studio 2005 SP1 installed and also the latest versions of .Net (1.1, 2.0, 3.0, 3.5).I have checked my web.config for the proper entries and uninstalled and reinstalled VS.I still have the red squiggly under the ScriptManager and UpdatePanel when they are placed in a content page under a master page. Everything works fine in the master page.I would really appreciate any assistance, this about to drive me insane.Please mark the post(s) that have helped you as "Answer"I'm better at brewi...

element 'UpdatePanel' is not a know element
i cant get it to disappear. i tried to do the other suggestions from this forum and from another websites. but still i cant get it to work. what am i missing? i already changed the ScriptManager of the master file, no go. i left the master file open, no go. i changed the tag prefix from asp to ajax, still no go. any other suggestion?  Is your website AJAX-enabled? Try starting a new website in Visual Studio or Visual Web Developer and select the AXAX-enabled website template. Jos Please download the release version of the AJAX extension here, then remove current installation and in...

Element 'Accordion' is not a known element
I am the newbie to learn the ASP.NET AJAX.I have found that I can use the Control Toolkit in the local drive only. It works in the debug mode. However, it doesn't work in the other network drive where the code is developed. A website is created by Toolkit Template "AjaxControlToolkitWebSite1". The error is "Element 'Accordion' is not a known element". The "AjaxControlToolkit.dll" is placed in the bin. Any help would be much appreciated.  ...

Web resources about - Prevent child elements from firing parent element 'onclick' event -

Resources last updated: 12/11/2015 2:59:50 PM