javascript - Materializecss 选择双击切换

Question

我正在使用 MaterializeCSS 创建一个选择“下拉”菜单。在 Mac 笔记本电脑上，下拉菜单工作正常(在 Safari 和 FireFox 中测试，并通过 browserling.com 在 IE 和 Chrome 中测试)。但是，当我从 Windows 计算机(IE 和 Chrome)浏览网站时，我总是必须双击才能切换下拉菜单。我不明白为什么会出现这个问题。如果有人能指出以下代码的具体问题，我将不胜感激:

  <div class="dropdown-div">
    <div class="input-field">
      <select>
        <option value="1" class="dropdown-text"><a class="dropdown-text-default" data-url="#General">General</a></option>
        <option value="2"><a class="dropdown-text" data-url="#Option1">Option1</a></option>
        <option value="3"><a class="dropdown-text" data-url="#Option2">Option2</a></option>
        <option value="4"><a class="dropdown-text" data-url="#Option3">Option3</a></option>
        <option value="5"><a class="dropdown-text" data-url="#Option4">Option4</a></option>
      </select>
    </div>
  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('select').material_select();
  });
  </script>

请从 MaterializeCSS 找到文档 here .

Answer 1

这是 Chrome 73 中的回归错误。要解决此问题，请使用以下代码:(这是我能找到的唯一解决方案。)

$('select').material_select();
document.querySelectorAll('.select-wrapper').forEach(t => t.addEventListener('click', e=>e.stopPropagation()))