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

Question

我在一个应用程序中使用 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 从该项目没有。我该如何处理？

Answer 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>

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

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

How to handle click on Bulma's dropdown component?

html

javascript

bulma