Javascript 在<；a>；标签_Javascript_Jquery

Javascript 在<；a>；标签

javascript jquery

Javascript 在<；a>；标签,javascript,jquery,Javascript,Jquery,我有一些HTML和jQuery，可以在单击链接时上下滑动div来显示或隐藏它：要显示/隐藏的内容 $（'div.toggle'）.hide（）； $（'ul.product-info li a'）。单击（函数（事件）{ $（this）.next（'div'）.slideToggle（200）； } 我的问题是：如何使用preventDefault（）停止链接作为链接并将“#”添加到我的URL末尾并跳到页面顶部我不知道正确的语法，我只是不断地得到一个错误，说 preventDefa

我有一些HTML和jQuery，可以在单击链接时上下滑动

div

来显示或隐藏它：



要显示/隐藏的内容

$（'div.toggle'）.hide（）；
$（'ul.product-info li a'）。单击（函数（事件）{
$（this）.next（'div'）.slideToggle（200）；
}

我的问题是：如何使用

preventDefault（）

停止链接作为链接并将“#”添加到我的URL末尾并跳到页面顶部

我不知道正确的语法，我只是不断地得到一个错误，说

preventDefault（）不是一个函数

尝试以下方法：

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

这是关于该问题的页面，在

中，您也可以通过单击事件返回false：

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

这将阻止A-Href被触发

但是请注意，出于可用性的原因，在理想的情况下，href仍然应该在某个地方，对于那些想在新选项卡中打开链接的人；）

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

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

return false;

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

建议您不要使用

返回false

，因为这样会导致3种情况：

event.preventDefault（）

event.stopPropagation（）

停止回调执行并在调用时立即返回

因此，在这种情况下，实际上应该只使用

event.preventDefault（）
这是我刚刚测试过的非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>


addEventListener（“加载”，函数（）{
var links=document.getElementsByTagName（“a”）；
对于（var i=0；i将href属性设置为href=“javascript:；”



要显示/隐藏的内容




要显示/隐藏的内容



使用
javascript:void（0）
经过多次操作后，当页面最终应转到
链接时，您可以执行以下操作：
jQuery("a").click(function(e){
    var self = jQuery(this);
    var href = self.attr('href');
    e.preventDefault();
    // needed operations

    window.location = href;
});

您可以从事件调用中使用return false；
来停止事件传播，它的行为类似于event.preventDefault（）；
对其进行否定。或者您可以在href属性中使用javascript:void（0）
来计算给定的表达式，然后将undefined
返回到元素
在调用事件时返回该事件：
<a href="" onclick="return false;"> ... </a>



无效案例：
<a href="javascript:void(0);"> ... </a>



有关详细信息，请参见：
1-简易方法：
<a href="javascript:;">Click Me</a>

4-在Javascript中使用inline onclick
、IIFE
、事件和preventDefault（）实现这一点的另一种方法：

是的，我想我回答的是我认为你的意图而不是问题：）为了它的价值，很多年前有人鼓吹你应该返回-1以防止触发href。我认为这在任何浏览器中都不起作用了，你必须“返回false”为了防止页面跳转。这种方式将丢失坏浏览器（ie系列）中的：hover属性。锚定的漂亮小宝石——谢谢！有人能描述一下为什么这样做吗？@KLVTZhref
锚定标记的属性（a
）可能不是空的…但我们可以将其设置为javascript:
，这是合法/有效的。然后，我们通过添加分号为
输入一个空语句。这样链接就什么也不做了。非常感谢！这使我能够实现后退按钮功能（记住pushState（）accross page设置的状态）进入CalePHP的面包屑中，比如$this->Html->addCrumb（'Sessions'，'javascript:window.history.back（）；'）；为什么preventDefault
，然后自己做默认操作？只需做你需要添加的事情，让默认仍然发生。@AhmadSharif我今天已经在FF 40.0.3和IE 11上测试过，仍然有工作。我认为void（0）可能会让用户感到难看/困惑，他们在悬停链接时可以看到它。实际上，您可以放置任何有效的JS，因此我喜欢放置一条描述其功能的注释。例如href=“javascript://Send Email”
Hi，或者干脆@ankabot是的。我相信这是在其他一些答案中。我只是想添加一个没有提到的不同方式的答案。还想用Javascript显示不同的做事方式。（JS中有无限的做事方式！）。最重要的答案更容易阅读，也更实用。这是一个理论而非实践的答案：）
<a href="" onclick="return false;"> ... </a>

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

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

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

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

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