javascript - 阻止链接重新加载页面

我正在创建一个响应式菜单:Codepen Demo

为避免单击链接时重新加载页面，我有:

$('nav.menu a[href="#"]').click(function () {
  $(this).preventDefault();
});

但这似乎不起作用。当我单击一个按钮时，菜单消失了。

有人知道我在做什么错吗？

最佳答案

不是需要.preventDefault()的元素，而是单击event。

尝试以下操作:

$('nav.menu a').click(function (event) {
  event.preventDefault();
  // or use return false;
});

我不建议将href用作选择器，最好将其指定为id或name。



你可以在这里阅读更多:

MDN:event.preventDefault()

jQuery:Selectors

有一种CSS方式，使用pointer-events。

因此，通过在CSS pointer-events: none;中使用，所有单击都将被忽略。这是“最近的”替代方法，并在IE11 +，Firefox 3.6 +，Chrome 2.0 +，Safari 4+中得到支持。

Example

关于javascript - 阻止链接重新加载页面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18575623/