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

这是显示您想要的行为的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。

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();。

有关更多信息，请查看：What's the difference between event.stopPropagation and event.preventDefault?

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

jQuery preventDefault（）不起作用

6 个答案: