jQuery: Select only the container, not the children?

[koroviev]

Hi

I have a box that animates with jQuery when clicked. It has two text links within it.
When either of these links are clicked, jQuery registers a click on the box and animates.
I understand why it happens, my question is:
Is there any way to prevent or disable the animation when it’s a link that’s clicked instead of the box itself?

If the next page loads fast enough (very fast) it’s okay.
But if not (most of the time) it just looks strange to see the animation happening just as you leaving the page.

Thanks for any help.

[Rob MacKay]

Do you have a live version so we can have a look?

[koroviev]

There’s no live version online yet, but I’ve put together a stripped down example from what I’m working with.
I can’t upload the file, so here’s the code, I used links to boards on this forum as the example.
Thanks,

Code:

Link 1

23-02-2010:

Link 2

Lorem ipsum dolor sit amet
Consectetur adipisicing elit…

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Link 3

19-02-2010:

Link 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[noahgelman]

Yes, there is a way, its called stopProgagation(). When you click the link, the links activate, but technically you clicked on the box as well, so that is why you are getting both reactions. Here’s an example on how to fix it:

Code:

$(“a.yourlink”).click(function(event){
event.stopPropagation();
});

That should stop is from moving up and activating the box as well.

[Author]

Posts