Magento blocking a href in topmenu with javascript

Question

This might sound somewhat confusing, but it seems Magento is blocking certain a href tags with javascript. Let me explain:

In the topmenu, I have a few categories:

- shirts
- pants
- hats
- accessoires

The categorie 'accessories' contains 3 sub categories named:

- rings
- necklaces
- jewels

On mobile devices, the topmenu is loaded in the same way as normally. But, I have made a custom animation when you go to the subcategory menu. The normal menu slides left, and the subcategorie menu slides in from the right.

The trigger for this animation lies on the parent of the a href, the .parent li:

$('#header-nav .nav-primary li.level0.parent').click(function(e){
 // javascript animation
});

But now I have a problem. The a tag inside the .parent tag fills up like 90% of the space. To trigger the animation, I can only use the 10% of the space, the other 90% used by the a-tag blocks the animation:

enter image description here

I asked my colleagues here at my internship, and they said they had met the problem before. However, they don't remember how they solved it, but they think the problem lies within the /skin/frontend/enterprise/default/js/app.js file.

Answer 1

I have found a solution, but not a very good one I think:

I simply gave the CSS attribute pointer-events:none; to the a tag inside the parent.

#header-nav .nav-primary li.level0.parent{
 cursor:pointer;
}
#header-nav .nav-primary li.level0.parent > a{
 pointer-events: none;
}

I would love to see a better solution, but for now this will do