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

Question

我有一组嵌套的 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; 
}); 

Answer 1

这里进行一些更改，无需重复相同的选择器，并检查事件是否来自 标记，如下所示：

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

您可以在这里测试。如果事件目标来自 （它没有子级），那么我们只需退出处理程序，返回 undefined，因为我们没有显式返回false click 事件会做正常的事情...转到href。

Answer 2

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

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

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

Answer 3

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

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

• jsFiddle 示例

Answer 4

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

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