javascript - Angular 下拉菜单消失

Question

我正在使用 Angular 5.1.2 + Bootstrap 3.3.7 + ngx-bootstrap 2.0.0-rc.0。我正在尝试创建一个下拉登录页面。

  <ul class="nav navbar-right">
        <li class="dropdown" dropdown>
          <a href="#" dropdownToggle class="dropdown-toggle" data-toggle="dropdown">
            <img src="assets/images/login_logo.png" alt="" class="img-responsive">
            </a>

          <!-- Dropdown Form -->
          <ul *dropdownMenu class="dropdown-menu" role="menu">
            <form class="form-group" action="index.html" method="post">
              <input class="form-control form-control-sm" type="text" placeholder="Enter your name">
              <input class="form-control form-control-lg" type="text" placeholder="Enter your name">
            </form>
          </ul>

下拉菜单工作正常，但问题是当我们单击下拉菜单的内容(即本例中的输入字段)时，下拉菜单会消失。这是因为当我们单击它时，系统会向 Bootstrap 发送一个调用来关闭它，这是预期的行为。为了防止调用返回，我们必须使用 jQuery 函数:

$('.dropdown-menu input').click(function(e) {
        e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
    });

但是，我不想将 jQuery 与 Angular 一起使用。还有其他可用的解决方案吗？

Answer 1

试试这个:

<input ... onclick="(event||window.event).stopPropagation()">

(event||window.event) 用于 IE 兼容性——在 IE 中，event 将是未定义的，因此使用 window.event 代替。如果您需要它在 IE8 或更早版本上工作，您需要添加一些内容以在 stopPropagation 不可用时使用 cancelBubble。

参见How to stop event propagation with inline onclick attribute?相关详情