jquery .click 当我不想要它时覆盖锚href！答案

【问题标题】：jquery .click overriding anchor href when i dont want it to!jquery .click 当我不想要它时覆盖锚href！
【发布时间】：2010-10-15 10:17:13
【问题描述】：

我有一组嵌套的 DIV，当用户单击它们时，它们会使用 jQuery 进行滑动切换。在最里面的 DIV 内有一个带有 HREF 的锚标记，它应该在某处导航。问题是，当我单击链接时，它会像父 DIV 一样滑动切换，而不是导航到 url。如果我右键单击锚点并选择在新选项卡中打开，则导航正常。请问你能发现什么问题吗？谢谢

  <div class="pod"> 
    <li id='ThirdParty'> 
        <div class='block'> 
            <h1>ThirdParty</h1>
            <div class='systemHeader'> 
                <h2><span>Bobs shop</span></h2> 
                <div class='subSystems'>                     
                    <div class='subSystemHeader'> 
                        <h3><span>&nbsp;Gifts</span></h3> 
                        <div class='reports '> 
                            <p class='reports i1'> 
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=470' title=''>Option 1</a></p> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </li> 
</div>

    $("div.subSystemHeader, div.subSystemHeader").click(function() { 
   $("> div", this).slideToggle(...); 
   return false; 
});

【问题讨论】：

标签： jquery html click toggle anchor

【解决方案1】：

这里有一些变化，不需要重复相同的选择器，并检查事件不是来自<a> 标签，如下所示：

$("div.subSystemHeader").click(function(e) { 
  if(e.target.nodeName == 'A') return; //skip this handler, don't return false
  $("> div", this).slideToggle(...); 
  return false; 
});

You can test it here。如果事件目标来自<a>（它没有子对象），那么我们只需退出处理程序，返回undefined，因为我们没有显式返回false，click 事件将执行这是正常的事情...转到href。

【讨论】：

【解决方案2】：

您可以检查点击的事件对象，然后检查事件目标 - 另请参阅http://api.jquery.com/event.target/

 $("div.subSystemHeader, div.subSystemHeader").click(function(event) { 
   if(event.target.nodeName.toLowerCase() == 'a') return;
 ...
 }

（没有测试，但应该可以）

【讨论】：

这不行，字符串区分大小写，nodeName 是大写的。

【解决方案3】：

您的问题是 return false; 阻止了默认行为。

$("a:eq(0)").click(function() {
    return false; /* does nothing */
});
$("a:eq(1)").click(function() {
    /* go to href */
});

Example on jsFiddle

【讨论】：

【解决方案4】：

我今天刚遇到这个问题。我发现了一篇非常有趣的文章，可能会有所帮助。它描述了“return false”和 Jquery 事件 (http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/) 的误用（使用）。我尚未在您的示例中测试以下代码，但我认为这应该可以工作。

$('.subSystemHeader a').click(function(e){
    e.stopPropagation(); 
});

【讨论】：