preventDefault but activate links

Question

In my navigation menu, I have a dropdown that I want to use. The actual dropping down is fine, and I've prevented the automatic bubbling by using preventDefault(); but now all the links within the dropdown no longer work.

How do I make it so that the dropdown works, doesn't bubble and all the links within the dropdown work?

Edit: I've also used event.stopPropagation() to no effect either. What's going on here?!

This is my code:

// Toggle dropdowns
$('.menu-item-has-children').click(function(e){
    e.preventDefault();
    $(this).find('.sub-menu').toggleClass('open');
});

More info on this at http://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault — pranay vadel, Jul 21 '14 at 23:46

Oriol · Accepted Answer · 2014-07-22T02:00:31.490

3

To stop bubbling, use event.stopPropagation().

Only use event.preventDefault() to prevent the default action of the event from happening.

Ah, now I see your problem. The issue is that when clicking a menu item to open a submenu, since the item is an anchor pointing to #, the document will scroll to top.

To avoid that, I suggest getting rid of href="#".

Alternatively, you can use preventDefault only if the clicked element was that element, not a descendant:

$('.menu-item-has-children').on('click', function(e){
    if(this == e.target) e.stopPropagation();
    // ...
});

Demo

edited Jul 22 '14 at 02:00

answered Jul 21 '14 at 23:43

Oriol

274,082
63
437
513

Unfortunately using stopPropagation() doesn't stop the snapping to the top of the screen. It does activate the links though – patkay Jul 22 '14 at 00:37
@patkay Can you post a fiddle showing that behavior? – Oriol Jul 22 '14 at 00:38
it's a bit hodgepodge, but hopefully it's enough for you to look at. http://jsfiddle.net/KQF9Z/ – patkay Jul 22 '14 at 00:57
@patkay So you want to load a new page, but leave the dropdown opened? – Oriol Jul 22 '14 at 01:03
Yes, when you open the drop down, you get the options, click on one of the options and it takes you to the new page with the dropdown closed and reset – patkay Jul 22 '14 at 01:08
if you expand the window and make the nav load full width, if you scroll down the page and press 'Services', the page will jump back to the top – patkay Jul 22 '14 at 01:20
which part did you change? – patkay Jul 22 '14 at 02:07
Oh my, how could I be so silly?! Thank you so much for your patience! You're a legend. =) @Oriol – patkay Jul 22 '14 at 02:20

score 0 · Answer 2 · answered Jul 22 '14 at 01:18

0

You can check which element was clicked by using e.target, and if the clicked element was a sub menu link, don't preventDefault

answered Jul 22 '14 at 01:18

AdamP.

137
4

sorry, Im a bit of a jquery newb. How would I go about this? Can you show me some example code? – patkay Jul 22 '14 at 01:26
no problem. this is rough but will give you an idea of what you need to do $('.menu-item-has-children').click(function(e){ //check to see if the clicked item doesn’t has a parent ul with a calls of sub-menu if (!($(e.target).parents('ul').hasClass('sub-menu’))) { e.preventDefaul(); $(this).find('.sub-menu').toggleClass('open'); } }); excuse the formatting, can’t get stack overflow to allow formatting – AdamP. Jul 22 '14 at 02:00

preventDefault but activate links

2 Answers2