preventDefault，但激活链接

在我的导航菜单中，我有一个我想要使用的下拉菜单。实际的下降很好，我已经通过使用preventDefault();阻止了自动冒泡，但现在下拉菜单中的所有链接都不再起作用。preventDefault，但激活链接

我该如何使下拉工作，不会出现泡泡和下拉菜单中的所有链接？

编辑：我也使用event.stopPropagation()也没有效果。这里发生了什么？！

这是我的代码：

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

来源

2014-07-21 patkay

你能分享html示例 –

'preventDefault！== stopPropagation' – undefined

有关详细信息，请访问http：//stackoverflow.c om/questions/5963669 /事件停止传播和事件防止默认情况下的差异 –

要停止冒泡，使用event.stopPropagation()。

只能使用event.preventDefault()来防止事件的默认动作发生。

啊，现在我看到你的问题了。问题是，当点击一个菜单项来打开一个子菜单时，由于该项目是一个指向#的锚，文档将滚动到顶部。

为了避免这种情况，我建议摆脱href="#"。

或者，你可以使用preventDefault只有在点击的元素是元素，而不是一个后代：

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

Demo

来源

2014-07-21 23:43:32 Oriol

不幸的是，使用stopPropagation（）不会停止捕捉到屏幕的顶部。它确实激活了链接 – patkay

@patkay你可以发布一个小提琴来显示这种行为吗？ – Oriol

这有点大杂烩，但希望它足以让你看看。 http://jsfiddle.net/KQF9Z/ – patkay

您可以检查被点击了哪个元素使用e.target，如果被点击的元素是一个子菜单链接，不妨碍默认

来源

2014-07-22 01:18:12

对不起，我有点jquery newb。我将如何去做这件事？你能告诉我一些示例代码吗？ – patkay

没问题。这是粗糙的，但会给你一个你需要做什么的想法 $（'。menu-item-has-children'）。click（function（e）{ //检查点击的项目是否（！（$（e.target）.parents（'ul'）。hasClass（'sub-menu'）））{ \t e。没有父ul并且有子菜单调用。preventDefaul（）; （'。sub-menu'）。toggleClass（'open'）; } }）; 借口格式化，无法获取堆栈溢出以允许格式化 –

preventDefault，但激活链接

回答

相关问题