javascript - Bootstrap 的 .dropdown ('toggle' ) 效果有点太好了 : dropdown is then unusable

Question

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

$(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') 关闭了下拉菜单，用户就不能再使用文本区域:当点击它获得焦点时，下拉菜单关闭.

如何解决？

---

如何重现错误

1. 单击标记为 localhost:8080 的下拉按钮；下拉菜单打开。
2. 点击空白文本区域；它得到关注。
3. 按键盘上的回车键；下拉菜单关闭。
4. 重复 #1。 (单击标记为 localhost:8080 的下拉按钮；打开下拉菜单。)
5. 重复 #2。 (单击空白文本区域；它获得焦点。)

观察到的行为

下拉菜单关闭。

预期行为

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

Answer 1

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

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

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