<a>标记上的preventDefault()


133

我有一些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()不是函数。

Answers:



52

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 2014年

8
href定位标记(a)的@KLVTZ 属性可能不为空...但是我们可以将其设置为javascript:<code-here>,这是合法/有效的。然后,我们<code-here>通过添加分号来输入一个空语句。这样,链接不执行任何操作。
Stijn de Witt

1
非常感谢!这使我可以在CalePHP的面包屑中实现后退按钮功能(记住页面上pushState()设置的状态),例如$ this-> Html-> addCrumb('Sessions','javascript:window.history.back();)。 ');
守护神


13

另外,您可以从click事件中返回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以防止href被触发。我认为这不再适用于任何浏览器,并且您必须“返回false”以防止页面跳转。
兰迪(Randy)

12

这是我刚刚测试过的非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>

12
<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:// Send Email"
colllin '16

11

然而,用在Javascript中这样做的另一种方式inline onclickIIFEeventpreventDefault()

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>

嗨,或者干脆<a href='#' onclick="event.preventDefault()">Click Me</a>
ankabot

6

经过几次操作后,当页面最终应该链接时,您可以执行以下操作:

          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

为什么不只是在CSS中呢?

在锚标记中删除“ 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>

在您的CSS中

  a{
    cursor: pointer;
    }

1
这种方式将在不良的浏览器(即家庭浏览器)中丢失:hover属性
Strae 2010年

4

如果停止传播事件不会打扰您,请使用

return false;

在处理程序的末尾。在jQuery中,它阻止默认行为,并停止事件冒泡。


4

您可以利用return false;事件调用来停止事件传播,就像event.preventDefault();否定事件一样。或者,您可以使用javascript:void(0)in href属性评估给定的表达式,然后返回undefined到元素。

调用时返回事件:

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

无效的情况:

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

您可以在以下文章中看到更多信息:在锚标记的click事件监听器上为href添加void(0)并在返回事件侦听器上添加“ return false”有什么作用?

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.