11

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

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

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

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

有谁知道我做错了什么？

4

7 回答 7

30

需要 a 的不是元素，而是.preventDefault()click event。

尝试这个：

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

我不建议使用hrefas 选择器，最好给它一个idor name。

来自 MDN，关于 .preventDefault()：
如果事件可取消，则 取消该事件，而不停止该事件的进一步传播。


你可以在这里阅读更多：

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

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

例子

于 2013-09-02T14:37:01.620 回答
7

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

<a class="font-weight-bold" href="javascript:void(0);"> Click Here </a>
于 2018-03-14T06:41:22.383 回答
5

只返回假。

$('nav.menu a[href="#"]').click(function () {
  return false
});
于 2013-09-02T14:37:09.377 回答
2

像这样使用：

$('nav.menu a[href="#"]').click(function (event) {
  event.preventDefault();
});
于 2013-09-02T14:37:25.073 回答
0 
$('nav.menu a[href="#"]').click(function (e) {
   e.preventDefault();
});
于 2014-09-01T12:27:52.637 回答
0

尝试这个：

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

工作代码笔示例： http ://codepen.io/anon/pen/cynEg

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

编辑我已经注释掉了第二个函数。

于 2013-09-02T15:17:06.117 回答
0

还有一个没有 jQuery 的内联选项：

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

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

于 2017-12-03T23:00:25.560 回答