Question

我想用search-input创建drop-down list。当我聚焦或点击除search-input以外的任何地方时，列表必须关闭。

我将listClose()添加到"blur"-Listener。但现在我无法从下拉元素中捕获点击事件。哪个是我真正需要的事件听众？或者我需要另一个实现？

请在下面运行代码段。我试着写得最清楚。

document.addEventListener("DOMContentLoaded", function() {
  var inputElement = document.getElementById("input_word-search");
  var listElement = document.getElementById("dd-menu_search-input");

  // Input will focused when document is ready.
  inputElement.focus();

  listOpen = function() {
    listElement.classList.add('dd-open');
  };

  listClose = function() {
    listElement.classList.remove('dd-open');
  };

  inputElement.addEventListener("focus", function(e) {
    listOpen();
  });

  inputElement.addEventListener("blur", function(e) {
    listClose();
  });
})

.dd-menu {
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  position: absolute;
  display: none;
}

.dd-suggestion {
  cursor: pointer;
  text-align: left;
  padding: 3px 20px;
  line-height: 24px;
}

.dd-suggestion:hover {
  color: #fff;
  background-color: #697981;
}

.dd-open {
  display: block;
}

.dd-empty {
  display: none;
}

#dd-menu_search-input {
  width: 74%;
}

<body>

  <div id="input-group">
    <input id="input_word-search" class="input_search suggest__field" type="search" autocomplete="off" name="q" placeholder="Seach">
    <div id="dd-menu_search-input" class="dd-menu dd-open">
      <div class="dd-dataset">
        <div class="dd-suggestion" onclick="alert('Click!')">
          suggestion-1
        </div>
        <div class="dd-suggestion" onclick="alert('Click!')">
          suggestion-2
        </div>
        <div class="dd-suggestion" onclick="alert('Click!')">
          suggestion-3
        </div>
        <div class="dd-suggestion" onclick="alert('Click!')">
          suggestion-4
        </div>
        <div class="dd-suggestion" onclick="alert('Click!')">
          suggestion-5
        </div>
      </div>
    </div>
  </div>

</body>

Answer 1

解决方案（或者我可以说是解决方法）是使用onmousedown而不是onclick，所以它看起来像这样（请注意，我也删除alert()并使用改为console.log()

<body>

  <div id="input-group">
    <input id="input_word-search" class="input_search suggest__field" type="search" autocomplete="off" name="q" placeholder="Seach">
    <div id="dd-menu_search-input" class="dd-menu dd-open">
      <div class="dd-dataset">
        <div class="dd-suggestion" onmousedown="console.log('Click!')">
          suggestion-1
        </div>
        <div class="dd-suggestion" onmousedown="console.log('Click!')">
          suggestion-2
        </div>
        <div class="dd-suggestion" onmousedown="console.log('Click!')">
          suggestion-3
        </div>
        <div class="dd-suggestion" onmousedown="console.log('Click!')">
          suggestion-4
        </div>
        <div class="dd-suggestion" onmousedown="console.log('Click!')">
          suggestion-5
        </div>
      </div>
    </div>
  </div>

</body>

Answer 2

原因是当您关注文本框时，它会调用blur函数，并且列表会立即消失。所以你不能点击列表。您可以setTimeout向listClose()这样的

进行漫游

listClose = function() {
    setTimeout(()=>{
      listElement.classList.remove('dd-open');
    },100)
};

Answer 3

我添加了boolean-variable，表示drop-down list

上的mousedown-event

    var mousedownOnNodeCalee = false;

    listElement.addEventListener("mousedown", function (e) {
        mousedownOnNodeCalee = true;
    });

    inputElement.addEventListener("blur", function (e) {
        if(!mousedownOnNodeCalee) {
            listClose();
            return;
        }
        inputElement.focus();
        mousedownOnNodeCalee = false;
    });

下拉列表会在不需要的时间关闭

3 个答案: