如何处理点击 Bulma 的下拉组件？答案

【问题标题】：How to handle click on Bulma's dropdown component?如何处理点击 Bulma 的下拉组件？
【发布时间】：2019-04-10 23:35:12
【问题描述】：

我在一个应用程序中使用了 bulma，我有一个如下的下拉列表：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" 
onclick="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" 
onblur="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
        Dropdown item
      </a>
      <a class="dropdown-item" onclick="javascript:alert('clicked')">
        Other dropdown item
      </a>
      <a href="#" onclick="javascript:alert('clicked')" class="dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
        Other dropdown item
      </a>
      <hr class="dropdown-divider">
      <a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
        With a divider
      </a>
    </div>
  </div>
</div>

我有onblur 事件处理程序，因此当用户在下拉菜单外部单击时它会关闭下拉菜单，但是当用户从下拉菜单中单击其中一项时，会触发模糊事件和onclick项目没有。我该如何处理？

【问题讨论】：

标签： javascript html bulma

【解决方案1】：

click 事件在您点击并释放的那一刻触发。您可以改用 onmousedown 事件，以便在触发模糊之前点击该项目：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" 
onclick="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" 
onblur="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
        Dropdown item
      </a>
      <a class="dropdown-item" onmousedown="javascript:alert('clicked')">
        Other dropdown item
      </a>
      <a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
        Other dropdown item
      </a>
      <hr class="dropdown-divider">
      <a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
        With a divider
      </a>
    </div>
  </div>
</div>

当然，以上假设您希望在单击其中一个菜单项时关闭下拉菜单。

【讨论】：