jQuery preventDefault（）不起作用

我有以下代码：

$(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结构是：

 
 
 
 
 
 
 
 
 $(document).ready(function(){$("ul.produse li").hover(function () { $("ul.produse li").removeClass('active');$(this).addClass('active');}, function () {$(this).removeClass('active');});});  
 
 
1
 
2
 
2
 
2
 
2
 
2
 
2
 
2
 
2
 
2
 
  

Answer 1

更新

这就是你的问题 – 你必须点击一些元素的事件处理程序。 在这种情况下，您附加处理程序的顺序很重要，因为它们将按此顺序触发。

这是一个工作小提琴 ，显示了你想要的行为。

这应该是你的代码：

 $(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()这个，如果删除e.stopImmediatePropagation()你会发现第二个点击处理程序的警报将在第一个警报后触发。 删除return false对此行为没有影响，但会导致浏览器遵循链接。

注意

一个更好的修复可能是确保选择器返回完全不同的元素集，因此没有重叠，但这可能并不总是可能的，在这种情况下，上述解决方案可能是一种考虑方式。

---

1. 我不明白为什么你的第一个代码片段不起作用。 您想要停止的默认操作是什么？

   如果您已将其他事件处理程序附加到链接，则应该查看event.stopPropagation()和event.stopImmediatePropagation() 。 请注意， return false等同于调用event.preventDefault 和 event.stopPropagation() ^ref

2. 在您的第二个代码段中，未定义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; }); 

这是一个工作示例，显示此代码确实有效，如果您只想停止链接的后续，则不需要return false 。

Answer 2

试试这个：

  $("div.subtab_left li.notebook a").click(function(e) { e.preventDefault(); return false; }); 

Answer 3

试试这个：

 $("div.subtab_left li.notebook a").click(function(e) { e.preventDefault(); }); 

Answer 4

如果您已经使用提交操作进行测试，那么您已经注意到它也不起作用。

原因是表单已被发布在$(document).read(...

因此，您需要做的就是将其更改为$(document).load(...

现在，在你浏览器加载页面的那一刻，他将执行。

并且会工作; D.

Answer 5

我只是遇到了同样的问题 – 已经测试了很多不同的东西。 但它只是行不通。 然后我再次检查jQuery.com上的教程示例，发现：

你的jQuery脚本需要在你所指的元素之后 ！

所以你的脚本需要在你想要访问的html代码之后！

似乎jQuery无法访问它。

Answer 6

如果是e.preventDefault(); 不工作你必须使用e.stopImmediatePropagation(); 代替。

有关更多信息，请查看： event.stopPropagation和event.preventDefault之间的区别是什么？

 $("div.subtab_left li.notebook a").click(function(e) { e.stopImmediatePropagation(); });