阻止链接重新加载页面

Question

我正在创建一个响应式菜单： Codepen演示

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

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

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

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

Answer 1

不是元素需要.preventDefault() ，它是click event 。

尝试这个：

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

我不建议您使用href作为选择器，最好给它一个id或name 。

从MDN开始，关于.preventDefault（）：
如果可以取消事件，则将其取消，而不停止事件的进一步传播。

你可以在这里阅读更多：

• MDN： event.preventDefault（）
• jQuery： 选择器

---

有一种CSS方式，使用指针事件 。

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

例

Answer 2

只需返回false。

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

Answer 3

这是在html中执行此操作的非常简单的方法。

<a class="font-weight-bold" href="javascript:void(0);"> Click Here </a>

Answer 4

这样使用：

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

Answer 5

尝试这个：

$('.menu a').click(function(e){
   e.preventDefault(); // stop the normal href from reloading the page.
});

有效的Codepen示例： http ：//codepen.io/anon/pen/cynEg

您没有对包含的jquery库的引用。 另外，“查询”功能现在会引发错误，但preventDefault起作用。

编辑我已经注释掉第二个功能。

Answer 6

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

Answer 7

还有没有jQuery的内联选项：

<a href="javascript:function f(e){e.preventDefault();}">Link</a>

并且不要忘记，您已经在函数中使用了“ f”名称，所以不要这样命名其他函数。