<a> 标签上的 preventDefault()

Posted 2023-03-05

技术标签:

【中文标题】<a> 标签上的 preventDefault()【英文标题】：preventDefault() on an <a> tag 【发布时间】：2010-09-20 21:32:26 【问题描述】：

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

【问题讨论】：

【参考方案1】：

在Javascript中你可以使用它

window.event.preventDefault();

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

【讨论】：

【参考方案2】：

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>

【讨论】：

嗨，或者干脆<a href='#' onclick="event.preventDefault()">Click Me</a> @ankabot 是的。我相信这是在其他一些答案中。我只是想以未提及的不同方式添加答案。还可以在 Javascript 中显示不同的做事方式。（在 JS 中有无限的做事方式！）。最佳答案更易于阅读且更实用。这只是理论而不是实践:)【参考方案3】：

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

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

    window.location = href;
);

【讨论】：

为什么要preventDefault，然后自己做默认动作呢？只需执行您需要添加的内容，并让默认设置仍然生效。【参考方案4】：

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

【讨论】：

不错的锚点小宝石——谢谢！谁能描述一下为什么会这样？ @KLVTZ href 锚标签属性（a）可能不为空...但我们可以将其设置为javascript:<code-here>，即合法/有效。然后我们通过添加分号输入 <code-here> 只是一个空语句。这样链接什么都不做。非常感谢！这让我可以在 Calephp 的面包屑中实现一个后退按钮功能（记住跨页面的 pushState() 设置的状态），例如 $this->Html->addCrumb('Sessions', 'javascript:window.history.back(); '); 这是一个旧答案，但即使在那时仍然是不好的建议。使用 JavaScript 将事件处理程序附加到元素，而不是 HTML。并且不要滥用 HTML 使用带有 href 属性的锚元素（它应该将用户导航到其他地方）来启动行为（按钮的用途）。【参考方案5】：

尝试类似：

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

这是jQuery documentation中的相关页面

【讨论】：

【参考方案6】：

建议不要使用return false，结果会出现3种情况：

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

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

Archive of article - jQuery Events: Stop (Mis)Using Return False

【讨论】：

【参考方案7】：

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

在事件被调用时返回：

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

无效案例：

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

您可以在以下位置查看更多信息：What's the effect of adding void(0) for href and 'return false' on click event listener of anchor tag?

【讨论】：

【参考方案8】：

<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 上测试过，还有工作。我认为 void(0) 对用户来说可能很难看/令人困惑，当他们悬停链接时可以看到它。您实际上可以放置任何有效的 JS，所以我喜欢放置一个描述它的作用的注释。例如href="javascript:// Send Email" 这是一个旧答案，但即使在那时仍然是不好的建议。使用 JavaScript 将事件处理程序附加到元素，而不是 HTML。并且不要通过使用具有href 属性的锚元素（应该将用户导航到其他地方）来启动行为（按钮的用途）来滥用 HTML。【参考方案9】：

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

【讨论】：

【参考方案10】：

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

return false;

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

【讨论】：

【参考方案11】：

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

【讨论】：

这种方式会在不良浏览器（即家庭）中失去:hover属性【参考方案12】：

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

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

这将阻止触发 A-Href。

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

【讨论】：

是的，我想我是在回答我认为你的意图而不是问题:) 对于它的价值，很多年前有人吹捧你应该返回 -1 以防止触发 href。我认为这不再适用于任何浏览器，您必须“返回 false”以防止页面跳转。

以上是关于<a> 标签上的 preventDefault()的主要内容，如果未能解决你的问题，请参考以下文章