Make WordPress Boostrap menu top link not a link

Question

I inherited a WordPress website with a boostrap nav menu. The nav menu dropdowns appear on hover on desktop computers, and they appear on click on mobile devices, which is great.

However, the parent items still link to pages, so if I'm viewing the site on my phone and click on the top-level nav, the drop down appears briefly before it sends me to that parent link. I could just make the parent link a # but that still refreshes a page.

I know very little about JS and I can't find the code where they've made the parent item links active. Can someone shoot me some code to try to make the parent item links not link to anything, but still have the drop down menus appear when they're clicked?

<nav id="nav" role="navigation">              
     <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</nav>

Answer 1

Someone gave me the answer:

$('.menu-item-has-children > a').on('click', function(e) { e.preventDefault(); });

Answer 2

I would use href="#" as the link target. Other than you wrote, it doesn't refresh the page, but only jumps to the top of the page, which most likely is where you are anyway when you click a menu entry.