在 < a > 标记上预防 Default()

我有一些 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()停止链接作为一个链接，并添加“ #”到我的网址的结束和跳转到页面的顶部？

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

PreventDefault ()不是函数。

384065 次浏览
小开
最佳答案

试试这样:

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

这是关于 JQuery 文档的一页

小开

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

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

这样就能阻止阿赫雷夫被激活。

但是请注意，出于可用性的考虑，在理想的情况下，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>

在你的犯罪现场,

  a{
cursor: pointer;
}
小开

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

return false;

在 jQuery 中，它阻止了默认行为，并且阻止了事件冒泡。

小开

建议不要使用 return false，因为结果会出现以下三种情况:

  1. Event.preventDefault () ;
  2. 停止传播() ;
  3. 停止回调执行，并在调用时立即返回。

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

文章资料库 -JQuery Events: Stop (Mis) Using Return False

小开

这是我刚刚测试的一个非 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>
小开

将 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>
小开 
<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) ;

小开

经过几次操作后，当页面最终转到 <a href"...">链接时，你可以做到以下几点:

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>

你可以看到更多关于: 为 href 添加 void (0)并返回 false 对于点击锚标记的事件监听器有什么影响？

小开

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-在 Javascript 中使用 inline onclick、 IIFE、 event和 preventDefault()的另一种方法:

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

在 Javascript中你可以使用它

window.event.preventDefault();

它在我的情况下工作。写入以上行到你的函数。


提交答案