jQuery preventDefault()不起作用

Question

我有以下代码:

$(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>

Answer 1

更新

还有你的问题-你就必须单击事件处理程序的一些a元素.在这种情况下,您附加处理程序的顺序很重要,因为它们将按此顺序触发.

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

这应该是你的代码:

$(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遗嘱对此行为没有影响,但会导致浏览器遵循链接.

注意

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

1. 我不明白为什么你的第一个代码片段不起作用.你想看到的默认动作是什么？

   如果您已将其他事件处理程序附加到链接,则应该查看event.stopPropagation()并event.stopImmediatePropagation()改为使用.注意,这return false相当于调用both 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;   
    });