a href nested in DIV element in ASP.NET C#

Question

Hello all, My question is quite simple, I created a DIV, with a HyperLink control in it. As following:

<div id="divOne" style="width: 500px;">  
    <asp:HyperLink runat="server" id="hlOne" Text="hlOne"
     NavigateUrl="http://www.StackOverflow.com" />  
</div>

I created an onclick event in jQuery for the DIV as well:

$('#divOne').click(function() {  
    alert('You clicked on the DIV element');  
});

My goal is to trigger this event when the DIV area is clicked (working fine), BUT- When the HyperLink is clicked, I need the page to redirect WITHOUT triggering the DIV 'onclick' event (can use JavaScript or jQuery as needed).

Thanks all!

Answer 1

To do this, stop the click event from bubbling up using event.stopPropagation(), like this:

$('#divOne a').click(function(e) {
    e.stopPropagation();
});

return false; would also stop the bubbling...but it would also stop the link from being followed, that's why we have .stopPropagation() :)