如何防止BootStrap Drop-down中URL末尾的#？

Question

我有这个链接:

<a href="#" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>

我使用preventDefault()并return false避免#在我的地址结束时.而且效果很好.问题是当我对Bootstrap的下拉列表做同样的事情时.如果我留下返回false,它不会#按照假设添加到最后,但它也会阻止下拉消失,就像我删除一样return false.这是我的下拉代码:

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="ddBtn">
    <i class="icon-wrench"></i><span>Parent Item<b class="caret"></b></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#" id="ddSonBtn">Child item</a></li>

使用Javascript:

$("#ddSonBtn").click(function () {
    //some code

    e.preventDefault();
});

这有解决方案吗？

我在用

Bootstrap 2
jQuery

谢谢.

Answer 1

它可能会或可能不会有据可查的,但没有必要同时调用preventDefault() 和 return false; jQuery的事件.

编辑:从jQuery的on文档:"从事件处理程序返回false将自动调用event.stopPropagation()和event.preventDefault()"(http://api.jquery.com/on/#event-handler)

return false;相当于e.preventDefault();和e.stopPropagation();

preventDefault防止元素的默认行为 - 例如提交表单的提交按钮,导航到特定的锚点href等.

stopPropagation阻止事件冒泡DOM.意思是,不会在目标元素的父元素上触发事件.

选择使用事件时所需的选项.在您的情况下,您可能只需要调用preventDefaultDropdown的点击处理程序.

此外,在您的代码中,return函数范围的使用是最后一行执行.运行该函数后,不会执行其后的任何代码.

Answer 2

根据Bootstrap文档:

http://getbootstrap.com/javascript/#dropdowns

有必要href用data-target属性替换,即

<a data-target="#" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>

我认为这是做事的更"自助"的方式,而不是压制事件处理程序或手动操作显示/隐藏行为.