<a>标签</a>上的 preventDefault()
[英]preventDefault() on an <a> tag
问题描述
I have some HTML and jQuery that slides a div up and down to show or hide` it when a link is clicked:
我有一些 HTML 和 jQuery，可以在单击链接时上下滑动div以显示或隐藏它：
<ul class="product-info">
<li>
<a href="#">YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
}
My question is: How do I use preventDefault() to stop the link acting as a link and adding "#" to the end of my URL & jumping to the top of the page?我的问题是：如何使用preventDefault()停止充当链接的链接并在 URL 末尾添加“#”并跳转到页面顶部？
I can't figure out the right syntax, I just keep getting an error saying我想不出正确的语法，我一直收到一个错误说
preventDefault() is not a function.
12 个解决方案
解决方案1
205 已采纳 2008-11-05 15:31:22
Try something like:尝试类似：
$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
event.preventDefault();
$(this).next('div').slideToggle(200);
});
Here is the page about that in the jQuery documentation这是jQuery 文档中关于此的页面
解决方案2
62 2012-05-07 07:49:16
Set the href attribute as href="javascript:;"将href属性设置为href="javascript:;"
<ul class="product-info">
<li>
<a href="javascript:;">YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
解决方案3
39 2011-08-15 05:06:29
It's suggested that you do not use return false , as 3 things occur as a result:建议您不要使用return false ，因为结果会发生 3 件事：
- event.preventDefault(); event.preventDefault();
- event.stopPropagation(); event.stopPropagation();
- Stops callback execution and returns immediately when called.停止回调执行并在调用时立即返回。
So in this type of situation, you should really only use event.preventDefault();所以在这种情况下，你真的应该只使用event.preventDefault();
Archive of article - jQuery Events: Stop (Mis)Using Return False 文章存档 - jQuery 事件：停止（错误）使用 Return False
解决方案4
18 2018-01-25 16:01:46
1 - Easy way: 1 - 简单的方法：
<a href="javascript:;">Click Me</a>
2 - using void(0): 2 - 使用 void(0)：
<a href="javascript:void(0);">Click Me</a>
3 - Using preventDefault() : 3 - 使用preventDefault() ：
<a href='#' onclick="event.preventDefault()">Click Me</a>
4 - Yet another way of doing this in Javascript using inline onclick , IIFE , event and preventDefault() : 4 - 使用inline onclick 、 IIFE 、 event和preventDefault()在 Javascript 中执行此操作的另一种方法：
<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>
解决方案5
13 2008-11-05 15:57:58
Alternatively, you could just return false from the click event:或者，您可以从 click 事件中返回 false：
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
+ return false;
});
Which would stop the A-Href being triggered.这将阻止触发 A-Href。
Note however, for usability reasons, in an ideal world that href should still go somewhere, for the people whom want to open link in new tab ;)但是请注意，出于可用性原因，在理想的世界中，对于想要在新选项卡中打开链接的人来说，href 仍然应该放在某个地方；)
解决方案6
12 2014-01-07 03:03:29
<ul class="product-info">
<li>
<a href="javascript:void(0);">YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
Use用
javascript:void(0);
解决方案7
12 2012-02-15 19:24:31
This is a non-JQuery solution I just tested and it works.这是我刚刚测试过的非 JQuery 解决方案，它有效。
<html lang="en">
<head>
<script type="text/javascript">
addEventListener("load",function(){
var links= document.getElementsByTagName("a");
for (var i=0;i<links.length;i++){
links[i].addEventListener("click",function(e){
alert("NOPE!, I won't take you there haha");
//prevent event action
e.preventDefault();
})
}
});
</script>
</head>
<body>
<div>
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.facebook.com">Facebook</a></li>
<p id="p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>
解决方案8
6 2014-02-04 10:07:06
After several operations, when the page should finally go to <a href"..."> link you can do the following:经过多次操作，当页面最终应该转到<a href"...">链接时，您可以执行以下操作：
jQuery("a").click(function(e){
var self = jQuery(this);
var href = self.attr('href');
e.preventDefault();
// needed operations
window.location = href;
});
解决方案9
5
Why not just do it in css?为什么不直接在 css 中做呢？
Take out the 'href' attribute in your anchor tag去掉锚标签中的“href”属性
<ul class="product-info">
<li>
<a>YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
In your css,在你的 css 中，
a{
cursor: pointer;
}
解决方案10
4 2016-10-22 15:28:36
You can make use of return false;您可以使用return false; from the event call to stop the event propagation, it acts like an event.preventDefault();从停止事件传播的事件调用开始，它的作用就像一个event.preventDefault(); negating it.否定它。 Or you can use javascript:void(0) in href attribute to evaluate the given expression and then return undefined to the element.或者您可以在 href 属性中使用javascript:void(0)来评估给定的表达式，然后将undefined返回给元素。
Returning the event when it's called:调用时返回事件：
<a href="" onclick="return false;"> ... </a>
Void case:无效情况：
<a href="javascript:void(0);"> ... </a>
You can see more about in: What's the effect of adding void(0) for href and 'return false' on click event listener of anchor tag?您可以在以下内容中看到更多信息： 在锚标记的单击事件侦听器上添加 void(0) for href 和 'return false' 有什么影响？
解决方案11
4 2011-05-31 13:44:25
If stopping the propagation of the event doesn't bother you, just use如果停止事件的传播不打扰您，只需使用
return false;
at the end of your handler.在您的处理程序结束时。 In jQuery it prevents the default behaviour and it stop the event bubbling.在 jQuery 中，它阻止默认行为并停止事件冒泡。
解决方案12
0 2021-09-10 14:47:12
In Javascript you can use it在Javascript 中你可以使用它
window.event.preventDefault();
It works in my case.它适用于我的情况。 write the above line into your function.将上述行写入您的函数中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.