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()来阻止链接充当链接，并将#添加到我的网址末尾＆amp;跳到页面顶部？

我无法弄清楚正确的语法，我只是不断收到一条错误，指出preventDefault（）不是函数。

Answer 1

尝试类似：

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

以下是jQuery documentation

中有关该页面的页面

Answer 2

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

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

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

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

Answer 3

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

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

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

这将阻止A-Href被触发。

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

Answer 5

<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：无效（0）;

Answer 6

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

经过多次操作后，当页面最终进入链接时，您可以执行以下操作：

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

            window.location = href;
          });

Answer 8

为什么不在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 9

使用inline onclick，IIFE，event和preventDefault()在Javascript中执行此操作的另一种方法：

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

Answer 10

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

即可

return false;

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

Answer 11

您可以使用事件调用中的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?

中查看更多相关信息

<a> tag</a>上的preventDefault（）

11 个答案: