jQuery preventDefault（）不起作用 [英] jQuery preventDefault() not working

问题描述

我有以下代码：

  $（document）.ready（function（）{
 
 $（div.subtab_left li.notebook a）。click（function（event）{
 event.preventDefault（）; 
 return false; 
}）; 
 
}）; 
  

但是当我点击元素..它不会阻止默认动作..为什么？ / p>

，并将代码修改为：

  $（document）。 ready（function（）{
 
 $（div.subtab_left li.notebook a）。click（function（）{
 e.preventDefault（）; 
 alert（ asdasdad）; 
 return false; 
}）; 
 
}）; 
  

它会停止默认动作，但不提醒..我找不到任何jQuery文档的答案

完整的代码如下：

  $ ）.ready（function（）{
 
 $（'＃tabs div.tab'）。hide（）; 
 $（'＃tabs div.tab:first'）。show ）; 
 $（'＃tabs ul li：first'）。addClass（'active'）; 
 
 $（'＃tabs ul li a'）。 
 $（'＃tabs ul li'）。removeClass（'active'）; 
 $（this）.parent（）。addClass（'active'）; 
 var currentTab = $这个）.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 =tab1href =＃tab-1>< / a>< / li> 
< li>< a id =tab2href =＃tab-2>< / a>< / li> 
< li>< a id =tab3href =＃tab-3>< / a>< / li> 
< li>< a id =tab4href =＃tab-4>< / a>< / li> 
< / ul> 
 
< div class =tabid =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 元素的事件处理程序。在这种情况下，您附加处理程序的顺序很重要，因为它们将以该顺序被触发。

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

这应该是你的代码：

  $（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'）点击（function（）{
 alert （处理链接点击）; 
 $（'＃tabs ul li'）。removeClass（'active'）; 
 $（this）.parent（）。addClass（'active'）; 
 var currentTab = $（this）.attr（'href'）; 
 $（' #tabs div.tab'）hide（）; 
 $（currentTab）.show（）; 
返回false; 
}）; 
 
}）; 
  

请注意，附加处理程序的顺序已交换， e.stopImmediatePropagation （）用于停止其他点击处理程序的触发，而 return false 用于停止跟随链接的默认行为（以及您可能会发现只需使用 e.stopPropagation ）。

播放如果您删除 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; 
   }）; 
     

   应该是

    code> //注意在函数参数中声明的e 
    $（div.subtab_left li.notebook a）。click（function（e）{
    e.preventDefault（）; 
    alert（asdasdad）; 
    return false; 
   }）; 
     

这里是一个工作示例，显示该代码确实有效，而返回false 不是真的需要，如果你只想停止以下链接。

I have the following code:

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

and when modifying the code to:

$(document).ready(function(){

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

});

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

The full code goes like this:

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

    });

});

and the HTML structure is:

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

解决方案

Update

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.

This should be your code:

$(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;
    });

});

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

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.

Note

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. 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?

   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

2. 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;   
   });
   

   should be

   //note the e declared in the function parameters now
   $("div.subtab_left li.notebook a").click(function(e) {
       e.preventDefault();
       alert("asdasdad");
       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屋！