logo标签列表

在<a>标签上使用preventDefault()函数

javascriptjquery
168

我有一些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);
}
我的问题是：如何使用preventDefault()来阻止链接作为链接并在我的URL末尾添加"#"并跳转到页面顶部？
我无法弄清正确的语法，我一直得到一个错误，说：

preventDefault()不是一个函数。

2
也许14年后提出这个问题有点奇怪，但是：为什么不使用按钮呢？ - Discostu36
1
@Discostu36 在我的情况下，为我们提供 HTML 和 CSS 的第三方将其编写为 <a>，将其更改为按钮会破坏所有 CSS。每当他们做出架构决策时，都会做出错误的决定。 - Jonesopolis
12个回答
212

尝试类似以下的内容：

$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});

这是关于jQuery文档中的内容。

73

将 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>
很棒的锚点小工具--谢谢！有人能描述一下为什么它有效吗？ - justinpage
9
锚标签（a）的 href 属性不应为空……但我们可以将其设置为 javascript:<code-here>，这是合法的。然后我们在 <code-here> 中添加一个分号来表示一个空语句。这样链接就不会有任何作用。 - Stijn de Witt
1
非常感谢！这使我能够将后退按钮功能（在跨页面设置pushState()状态）实现到CalePHP的面包屑中，像这样：$this->Html->addCrumb('Sessions', 'javascript:window.history.back();'); - Patronaut
这是一个旧答案，即使当时也是错误的建议。使用JavaScript将事件处理程序附加到元素，而不是HTML。不要滥用HTML，使用带有href属性的锚元素（应该将用户导航到其他地方）来启动行为（按钮的用途）。 - Heretic Monkey
45
43

1 - 简单方法:

<a href="javascript:;">Click Me</a>

2 - 使用 void(0)：

<a href="javascript:void(0);">Click Me</a>

3 - 使用preventDefault()：

<a href='#' onclick="event.preventDefault()">Click Me</a>

4 - 使用 inline onclick、IIFE、event 和 preventDefault() 在 JavaScript 中实现的另一种方法：

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>
1
你好，或者简单地说 <a href='#' onclick="event.preventDefault()">点击我</a>。 - tarik128
@ankabot 是的。我相信这在其他答案中已经提到了。我只是想添加一个不同的答案，以展示在Javascript中做事情的不同方式（在JS中有无限的方法！）。顶部答案更易于阅读和更实用。这只是为了理论而非实践 :) - A-Sharabiani
13

这是一个非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>
13

或者，您可以直接从点击事件中返回false：

 $('div.toggle').hide();
 $('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
+ return false; 
 });

这将停止触发A-Href。

然而要注意的是，出于可用性的原因，在理想情况下，对于那些想要在新标签页中打开链接的人来说，该href仍然应该指向某个地方；）

1
是的，我想我回答的是我认为你的意图而不是问题本身 :) - Kent Fredric
1
说实话，很多年前有人宣传应该返回-1来防止href被触发。我认为这在任何浏览器中都不再起作用了，现在必须使用"return false"来防止页面跳转。 - Randy
11
<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>

使用

javascript:void(0);

@AhmadSharif 我今天在FF 40.0.3和IE 11上进行了测试，仍然可以工作。 - HATCHA
1
我认为void(0)可能会让用户感到丑陋/混乱，因为当他们悬停在链接上时可以看到它。实际上，您可以放置任何有效的JS代码，因此我喜欢放置描述其功能的注释。例如：href="javascript://发送电子邮件"。 - colllin
这是一个旧答案，即使当时也是错误的建议。使用JavaScript将事件处理程序附加到元素，而不是HTML。不要滥用HTML，使用带有href属性的锚元素（应该将用户导航到其他地方）来启动行为（按钮的用途）。 - Heretic Monkey
6

在进行多次操作后，当页面最终需要跳转到<a href"...">链接时，您可以执行以下操作：

jQuery("a").click(function(e){
    var self = jQuery(this);
    var href = self.attr('href');
    e.preventDefault();
    // needed operations

    window.location = href;
});
1
为什么要使用 preventDefault，然后再手动执行默认操作呢？只需执行您需要添加的内容，让默认操作继续进行即可。 - nathanvda
5

您可以在事件调用时使用return false;来停止事件传播，它的作用类似于event.preventDefault();，从而抵消它。或者您可以在href属性中使用javascript:void(0)来评估给定的表达式，然后将undefined返回给元素。

在调用事件时返回事件：

<a href="" onclick="return false;"> ... </a>

空（void）情况：

<a href="javascript:void(0);"> ... </a>

您可以在此处了解更多信息： 添加href的void(0)和在单击事件监听器上添加'return false'对锚标签有什么影响？
5

如果停止事件传播不会影响你，只需使用

return false;

在您的处理程序末尾使用。在jQuery中，它可以防止默认行为并停止事件冒泡。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接