Как обработать щелчок по выпадающему компоненту Булмы? - PullRequest
Новая
       15

Как обработать щелчок по выпадающему компоненту Булмы?

1 голос
/ 11 апреля 2019

Я использую 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 от предмета - нет.Как мне справиться с этим?

1 Ответ

0 голосов
/ 11 апреля 2019

Событие 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>
Конечно, вышеизложенное предполагает, что вы захотите закрыть раскрывающийся список в тот момент, когда вы нажимаете на один из пунктов меню.
...