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>

下拉列表工作正常，但问题是当我们点击下拉列表的内容（即本例中的输入字段）时，下拉列表会消失。这是因为当我们点击它时，会将一个调用发送回引导程序以关闭它，这是预期的行为。为了防止调用返回，我们必须使用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.
    });

但是，我不想在Angular中使用jQuery。还有其他解决方案吗？

Answer 1

尝试一下：

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

(event||window.event)用于IE兼容性-在IE中，事件将是未定义的，因此将使用window.event代替。如果您需要它在IE8或更早版本上运行，则在stopPropagation不可用的情况下，您需要添加一些内容以使用cancelBubble。

有关详细信息，请参见How to stop event propagation with inline onclick attribute?

角度下降消失

1 个答案: