我有以下代码:
$(document).ready(function(){
$("div.subtab_left li.notebook a").click(function(event) {
event.preventDefault();
return false;
});
});
但是当我单击该元素时..它不会阻止默认操作..为什么?
并将代码修改为:
$(document).ready(function(){
$("div.subtab_left li.notebook a").click(function() {
e.preventDefault();
alert("asdasdad");
return false;
});
});
它停止默认操作但不发出警报..我在 jQuery 文档上找不到任何答案。
完整的代码如下:
$(document).ready(function(){
$('#tabs div.tab').hide();
$('#tabs div.tab:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.tab').hide();
$(currentTab).show();
return false;
});
$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
alert("asdasdad");
return false;
});
});
HTML 结构为:
<div id="tabs">
<ul id="nav">
<li><a id="tab1" href="#tab-1"></a></li>
<li><a id="tab2" href="#tab-2"></a></li>
<li><a id="tab3" href="#tab-3"></a></li>
<li><a id="tab4" href="#tab-4"></a></li>
</ul>
<div class="tab" id="tab-1">
<script type="text/javascript">$(document).ready(function(){$("ul.produse li").hover(function () {
$("ul.produse li").removeClass('active');$(this).addClass('active');}, function () {$(this).removeClass('active');});});
</script>
<div class="subtab_left">
<ul>
<li class="notebook"><a href="#">1</a></li>
<li class="netbook"><a href="#">2</a></li>
<li class="allinone"><a href="#">2</a></li>
<li class="desktop"><a href="#">2</a></li>
<li class="procesoare"><a href="#">2</a></li>
<li class="placi_video"><a href="#">2</a></li>
<li class="hdd_desktop"><a href="#">2</a></li>
<li class="tv_plasma"><a href="#">2</a></li>
<li class="tv_lcd"><a href="#">2</a></li>
<li class="telefoane_mobile last_item"><a href="#">2</a></li>
</ul>
</div>
最佳答案
更新
这就是您的问题 - 您确实必须单击某些a
元素的事件处理程序。在这种情况下,附加处理程序的顺序很重要,因为它们将按该顺序被触发。
这里的 a working fiddle 显示了您想要的行为。
这应该是您的代码:
$(document).ready(function(){
$('#tabs div.tab').hide();
$('#tabs div.tab:first').show();
$('#tabs ul li:first').addClass('active');
$("div.subtab_left li.notebook a").click(function(e) {
e.stopImmediatePropagation();
alert("asdasdad");
return false;
});
$('#tabs ul li a').click(function(){
alert("Handling link click");
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.tab').hide();
$(currentTab).show();
return false;
});
});
请注意,附加处理程序的顺序已交换,e.stopImmediatePropagation()
用于阻止其他点击处理程序触发,而 return false
用于停止跟随链接的默认行为(以及停止事件的冒泡。您可能会发现只需要使用 e.stopPropagation
)。
尝试一下,如果您删除 e.stopImmediatePropagation()
,您会发现第二个点击处理程序的警报将在第一个警报之后触发。删除 return false
不会对此行为产生任何影响,但会导致浏览器跟踪链接。
注意
更好的解决办法可能是确保选择器返回完全不同的元素集,以便不存在重叠,但这可能并不总是可行,在这种情况下,上述解决方案可能是考虑的一种方法。
<小时/>我不明白为什么你的第一个代码片段不起作用。您看到想要停止的默认操作是什么?
如果您已将其他事件处理程序附加到链接,则应该查看
event.stopPropagation()
和event.stopImmediatePropagation()
。请注意,return false
相当于同时调用event.preventDefault
和event.stopPropagation()
ref在第二个代码片段中,
e
未定义。因此,e.preventDefault()
会抛出错误,并且下一行永远不会执行。 换句话说$("div.subtab_left li.notebook a").click(function() { e.preventDefault(); alert("asdasdad"); return false; });
应该是
//note the e declared in the function parameters now $("div.subtab_left li.notebook a").click(function(e) { e.preventDefault(); alert("asdasdad"); return false; });
这里的 a working example 表明该代码确实有效,并且如果您只想停止跟踪链接,则实际上不需要 return false
。
关于jQuery PreventDefault() 未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5614099/