Bootstrap 的 .dropdown('toggle') 工作得有点太好了：然后下拉菜单不可用答案

【问题标题】：Bootstrap's .dropdown('toggle') works a bit too well: dropdown is then unusableBootstrap 的 .dropdown('toggle') 工作得有点太好了：然后下拉菜单不可用
【发布时间】：2018-12-13 16:02:10
【问题描述】：

我有一个包含文本区域的下拉菜单。在文本区域上按下返回键时，我希望关闭下拉菜单。这就是以下内容：

$(document).ready(function(){
  $('#edit').keypress(function(e) {
    var KeyEnter = 13;
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if (keycode == KeyEnter) {
      $('#menu').dropdown('toggle');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown" id="menu">
  <button class="w-75 text-left btn btn-light dropdown-menu-toggle dropdown-toggle" type="button" data-toggle="dropdown" data-default-label="localhost:8080" aria-expanded="true">
    <code class="dropdown-toggle-text is-default" id="server">localhost:8080</code>
  </button>
  <div class="dropdown-menu dropdown-select w-75">
    <div class="dropdown-input">
      <input type="search" id="edit" class="dropdown-input-field form-control">
    </div>
    <div class="dropdown-content" id="list">
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#"><code>localhost:8080</code></a>
      <a class="dropdown-item" href="#"><code>172.17.0.2:8080</code></a></div>
  </div>
</div>

问题是，一旦使用.dropdown('toggle') 关闭下拉菜单，用户就不能再使用文本区域：当单击它以使其获得焦点时，下拉菜单会关闭。

如何解决？

如何重现错误

点击标记为localhost:8080的下拉按钮；下拉菜单打开。
点击空白文本区；获得焦点。
按键盘的 Return 键；下拉菜单关闭。
重复 #1。（点击标记为localhost:8080 的下拉按钮；下拉菜单打开。）
重复 #2。（单击空白文本区域；它会获得焦点。）

观察到的行为

下拉菜单关闭。

预期行为

下拉菜单保持打开状态，#5 之后的状态与 #2 之后的状态相同。

【问题讨论】：

标签： javascript twitter-bootstrap events bootstrap-4 dropdown

【解决方案1】：

您的代码的问题是来自该字段的点击事件正在冒泡到父级。它正在点击下拉事件，然后充当点击。解决方案是阻止这些点击向上传播。

$("#edit").click(function(e){
    e.stopPropagation();
}).keypress(function(e) {
    // ... your code
});

请注意，代替 e.stopPropagation(); 的 return false; 也会像调用 e.preventDefault(); 一样，这可能会在将来导致其他问题。

【讨论】：