关于javascript事件：jQuery preventDefault（）不起作用


jQuery preventDefault() not working

我有以下代码：

1
2
3
4
5
6
7
8
$(document).ready(function(){

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

});

但是当我点击元素的时候……它不会阻止默认操作。为什么？

当将代码修改为：

1
2
3
4
5
6
7
8
9
$(document).ready(function(){

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

});

它停止默认操作，但不发出警报。我在jquery文档上找不到任何答案。

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(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结构是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<ul id="nav">

<li>

</li>


<li>

</li>


<li>

</li>


<li>

</li>


</ul>



        <script type="text/javascript">$(document).ready(function(){$("ul.produse li").hover(function () {
        $("ul.produse li").removeClass('active');$(this).addClass('active');}, function () {$(this).removeClass('active');});});
   

     
       
<ul>

            <li class="notebook">1
</li>

            <li class="netbook">2
</li>
     
            <li class="allinone">2
</li>
 
            <li class="desktop">2
</li>
 
            <li class="procesoare">2
</li>
 
            <li class="placi_video">2
</li>
   
            <li class="hdd_desktop">2
</li>

            <li class="tv_plasma">2
</li>

            <li class="tv_lcd">2
</li>

            <li class="telefoane_mobile last_item">2
</li>

       
</ul>
相关讨论

更新

还有你的问题——你必须点击一些a元素的事件处理程序。在这种情况下，附加处理程序的顺序很重要，因为它们将按该顺序被解雇。

这是一把能显示你想要的行为的小提琴。

这应该是您的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(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()引用

  • 在第二个代码片段中，没有定义e。所以会向e.preventDefault()抛出一个错误，下一行永远不会执行。换言之

    1
    2
    3
    4
    5
    $("div.subtab_left li.notebook a").click(function() {
        e.preventDefault();
        alert("asdasdad");
        return false;  
    });

    应该是

    1
    2
    3
    4
    5
    6
    //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。

    相关讨论

    试试这个：

    1
    2
    3
    4
       $("div.subtab_left li.notebook a").click(function(e) {
        e.preventDefault();
        return false;  
        });
    相关讨论

    试试这个：

    1
    2
    3
    $("div.subtab_left li.notebook a").click(function(e) {
        e.preventDefault();
    });
    相关讨论

    我也遇到过同样的问题——测试了很多不同的东西。但它就是不起作用。然后我再次查看jquery.com上的教程示例，发现：

    您的jquery脚本需要在您所引用的元素之后！

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

    似乎jquery无法访问它。

    相关讨论

    如果您已经使用提交操作进行了测试，那么您已经注意到了这一点。

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

    所以，你所要做的就是把它改成$(document).load(...。

    现在，在您浏览或加载页面的时刻，他将执行。

    并且会工作；d

    如果e.preventDefault();不起作用，必须使用e.stopImmediatePropagation();代替。

    有关更多信息，请查看：event.stoppropagation和event.preventdefault有什么区别？

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