jQuery preventDefault()未触发 [英] jQuery preventDefault() not triggered

问题描述

我有以下代码:

$(document).ready(function(){

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

});

但是当我单击元素..时，它不会阻止默认操作..为什么?

but when I click the element .. it doesn't prevent the default action .. Why?

以及将代码修改为:

$(document).ready(function(){

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

});

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

it stops the default action but does not alert .. I couldn't find any answer on jQuery docs.

完整代码如下:

$(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元素的事件处理程序.在这种情况下，附加处理程序的顺序很重要，因为它们将按该顺序触发.

And there's your problem - you do have to click event handlers for some a elements. In this case, the order in which you attach the handlers matters since they'll be fired in that order.

这是有效的小提琴，它显示了您想要的行为.

Here's a working fiddle that shows the behaviour you want.

这应该是您的代码:

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

Note that the order of attaching the handlers has been exchanged and e.stopImmediatePropagation() is used to stop the other click handler from firing while return false is used to stop the default behaviour of following the link (as well as stopping the bubbling of the event. You may find that you need to use only e.stopPropagation).

试试看，如果删除e.stopImmediatePropagation()，您会发现第二个单击处理程序的警报将在第一个警报之后触发.删除return false不会对此行为产生任何影响，但会导致浏览器跟随链接.

Play around with this, if you remove the e.stopImmediatePropagation() you'll find that the second click handler's alert will fire after the first alert. Removing the return false will have no effect on this behaviour but will cause links to be followed by the browser.

注意

一个更好的解决方法可能是确保选择器返回完全不同的元素集，因此不会出现重叠，但是在某些情况下，上述解决方案可能是考虑的一种方式.

A better fix might be to ensure that the selectors return completely different sets of elements so there is no overlap but this might not always be possible in which case the solution described above might be one way to consider.

1. 我不明白为什么您的第一个代码段不起作用.您看到要停止的默认操作是什么?

1. I don't see why your first code snippet would not work. What's the default action that you're seeing that you want to stop?

如果您在链接上附加了其他事件处理程序，则应查看 event.stopPropagation() 和 event.stopImmediatePropagation() 代替.请注意，return false等同于调用event.preventDefault 和 event.stopPropagation()

If you've attached other event handlers to the link, you should look into event.stopPropagation() and event.stopImmediatePropagation() instead. Note that return false is equivalent to calling both event.preventDefault and event.stopPropagation()^ref

在第二个代码段中，未定义e.因此，在e.preventDefault()处将引发错误，并且下一行将永远不会执行. 换句话说

In your second code snippet, e is not defined. So an error would thrown at e.preventDefault() and the next lines never execute. In other words

$("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并非如此如果您只想停止链接的跟踪，则为必填项.

Here's a working example showing that this code indeed does work and that return false is not really required if you only want to stop the following of a link.

这篇关于jQuery preventDefault()未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！