jQuery 防止链接重新加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18575623/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent a link to reload page
提问by Miguel Moura
I am creating a responsive menu: Codepen Demo
我正在创建一个响应式菜单：Codepen Demo
To avoid the page to be reloaded when I click a link I have:
为了避免在单击链接时重新加载页面，我有：
$('nav.menu a[href="#"]').click(function () {
$(this).preventDefault();
});
But this does not seem to work. When I click a button the menu disappears.
但这似乎不起作用。当我单击一个按钮时，菜单消失。
Does anyone knows what I am be doing wrong?
有谁知道我做错了什么？
回答by Sergio
It's not the element that need a .preventDefault(), its the click event.
需要 a 的不是元素，而是.preventDefault()click event。
Try this:
尝试这个：
$('nav.menu a').click(function (event) {
event.preventDefault();
// or use return false;
});
I don't recommend to use the hrefas selector though, better to give it an idor name.
我不建议使用hrefas 选择器，最好给它一个idor name。
From MDN, about .preventDefault():
Cancels the eventif it is cancelable, without stopping further propagation of the event.
从MDN，约.preventDefault（）：
取消事件，如果它是取消，在不停止的情况下的进一步传播。
You can read more here:
你可以在这里阅读更多：
- MDN: event.preventDefault()
- jQuery: Selectors
- MDN：event.preventDefault()
- jQuery：选择器
There is a CSS way, using pointer-events.
有一种 CSS 方式，使用pointer-events。
So by using in the CSS pointer-events: none;all click will be ignored. This is a "recent" alternative and suported in IE11+, Firefox 3.6+, Chrome 2.0+, Safari 4+.
因此，通过在 CSS 中使用，pointer-events: none;所有点击都将被忽略。这是“最近”的替代方案，支持 IE11+、Firefox 3.6+、Chrome 2.0+、Safari 4+。
Example
例子
回答by slinky2000
Just return false.
只是返回false。
$('nav.menu a[href="#"]').click(function () {
return false
});
回答by Ahsan
Here is very easy way to do it inside html.
这是在 html 中执行此操作的非常简单的方法。
<a class="font-weight-bold" href="javascript:void(0);"> Click Here </a>
回答by Murat ?orlu
Use like that:
像这样使用：
$('nav.menu a[href="#"]').click(function (event) {
event.preventDefault();
});
回答by lharby
Try this:
尝试这个：
$('.menu a').click(function(e){
e.preventDefault(); // stop the normal href from reloading the page.
});
Working codepen example: http://codepen.io/anon/pen/cynEg
工作代码笔示例：http://codepen.io/anon/pen/cynEg
You did not have a reference to the jquery library included. Also the 'enquire' function is now throwing an error but preventDefault is working.
您没有对包含的 jquery 库的引用。此外，“查询”功能现在正在引发错误，但 preventDefault 正在工作。
EditI have commented out the second function.
编辑我已经注释掉了第二个功能。
回答by kazimt9
$('nav.menu a[href="#"]').click(function (e) {
e.preventDefault();
});
回答by adkl
And an inline option without jQuery:
还有一个没有 jQuery 的内联选项：
<a href="javascript:function f(e){e.preventDefault();}">Link</a>
And don't forget that with this you have already used the "f" name for a function, so don't name other function like this.
并且不要忘记，在此您已经为函数使用了“f”名称，因此不要像这样命名其他函数。
