Chr*_*len 123 javascript jquery
当点击一个链接时,我有一些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);
}
我的问题是:我如何使用div停止链接充当链接并添加preventDefault()到我的URL的末尾并跳转到页面顶部？
我无法弄清楚正确的语法,我只是不断收到一个错误,说preventDefault()不是一个函数.
Dav*_*ano 181
尝试类似的东西:
$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
event.preventDefault();
$(this).next('div').slideToggle(200);
});
这是jQuery文档中关于它的页面
Mus*_*han 43
将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>
Rya*_*tle 37
建议您不要使用return false,因为结果会发生以下三种情况:
所以在这种情况下,你真的应该只使用 event.preventDefault();
文章存档 - jQuery事件:使用Return False停止(误)
HAT*_*CHA 13
<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);
Jef*_*lla 12
这是我刚刚测试的非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>
Ken*_*ric 11
或者,您可以从click事件返回false:
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
+ return false;
});
哪会阻止A-Href被触发.
但请注意,出于可用性的原因,在一个理想的世界中,对于想要在新标签中打开链接的人,href应该仍然在某处;)
然而，用在Javascript中这样做的另一种方式inline onclick，IIFE，event和preventDefault()：
<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>
经过几次操作,当页面最终应该链接时,您可以执行以下操作:
jQuery("a").click(function(e){
var self = jQuery(this);
var href = self.attr('href');
e.preventDefault();
// needed operations
window.location = href;
});
小智 5
为什么不只是在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;
}
如果停止事件的传播不会打扰您，只需使用
return false;
在你的处理程序的末尾。在 jQuery 中，它阻止默认行为并阻止事件冒泡。
您可以利用return false;事件调用来停止事件传播，它的作用就像event.preventDefault();否定它一样。或者您可以使用javascript:void(0)in href 属性来计算给定的表达式，然后返回undefined到元素。
调用时返回事件：
<a href="" onclick="return false;"> ... </a>
无效案例：
<a href="javascript:void(0);"> ... </a>
您可以在以下内容中查看更多信息：在锚标记的点击事件侦听器上为 href 添加 void(0) 和“return false”有什么效果？
| 归档时间： |
|
| 查看次数： |
273112 次 |
| 最近记录： |