<a>标签</a>上的 preventDefault()

Question

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

Answer 1

尝试类似：

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

这是jQuery 文档中关于此的页面

Answer 2

将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>

Answer 3

建议您不要使用return false ，因为结果会发生 3 件事：

event.preventDefault();
event.stopPropagation();
停止回调执行并在调用时立即返回。

所以在这种情况下，你真的应该只使用event.preventDefault();

文章存档 - jQuery 事件：停止（错误）使用 Return False

Answer 4

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>

Answer 5

或者，您可以从 click 事件中返回 false：

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

这将阻止触发 A-Href。

但是请注意，出于可用性原因，在理想的世界中，对于想要在新选项卡中打开链接的人来说，href 仍然应该放在某个地方；)

Answer 6

<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);

Answer 7

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

Answer 8

经过多次操作，当页面最终应该转到<a href"...">链接时，您可以执行以下操作：

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

    window.location = href;
});

Answer 9

为什么不直接在 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;
    }

Answer 10

您可以使用return false; 从停止事件传播的事件调用开始，它的作用就像一个event.preventDefault(); 否定它。 或者您可以在 href 属性中使用javascript:void(0)来评估给定的表达式，然后将undefined返回给元素。

调用时返回事件：

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

无效情况：

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

您可以在以下内容中看到更多信息：在锚标记的单击事件侦听器上添加 void(0) for href 和 'return false' 有什么影响？

Answer 11

如果停止事件的传播不打扰您，只需使用

return false;

在您的处理程序结束时。 在 jQuery 中，它阻止默认行为并停止事件冒泡。

Answer 12

在Javascript 中你可以使用它

window.event.preventDefault();

它适用于我的情况。 将上述行写入您的函数中。

<a>标签</a>上的 preventDefault()

问题描述

12 个解决方案

解决方案1
205 已采纳 2008-11-05 15:31:22

解决方案2
62 2012-05-07 07:49:16

解决方案3
39 2011-08-15 05:06:29

解决方案4
18 2018-01-25 16:01:46

解决方案5
13 2008-11-05 15:57:58

解决方案6
12 2014-01-07 03:03:29

解决方案7
12 2012-02-15 19:24:31

解决方案8
6 2014-02-04 10:07:06

解决方案9
5

解决方案10
4 2016-10-22 15:28:36

解决方案11
4 2011-05-31 13:44:25

解决方案12
0 2021-09-10 14:47:12

<a>标签</a>上的 preventDefault()

问题描述

12 个解决方案

解决方案1 205 已采纳 2008-11-05 15:31:22

解决方案2 62 2012-05-07 07:49:16

解决方案3 39 2011-08-15 05:06:29

解决方案4 18 2018-01-25 16:01:46

解决方案5 13 2008-11-05 15:57:58

解决方案6 12 2014-01-07 03:03:29

解决方案7 12 2012-02-15 19:24:31

解决方案8 6 2014-02-04 10:07:06

解决方案9 5

解决方案10 4 2016-10-22 15:28:36

解决方案11 4 2011-05-31 13:44:25

解决方案12 0 2021-09-10 14:47:12

解决方案1
205 已采纳 2008-11-05 15:31:22

解决方案2
62 2012-05-07 07:49:16

解决方案3
39 2011-08-15 05:06:29

解决方案4
18 2018-01-25 16:01:46

解决方案5
13 2008-11-05 15:57:58

解决方案6
12 2014-01-07 03:03:29

解决方案7
12 2012-02-15 19:24:31

解决方案8
6 2014-02-04 10:07:06

解决方案9
5

解决方案10
4 2016-10-22 15:28:36

解决方案11
4 2011-05-31 13:44:25

解决方案12
0 2021-09-10 14:47:12