0
<b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <b-dropdown id="dropdown-2" text="Dropdown Button" class="m-md-2">
        <b-dropdown-item>First Action</b-dropdown-item>
        <b-dropdown-item>Second Action</b-dropdown-item>
        <b-dropdown-item>Third Action</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
        <b-dropdown-item active>Active action</b-dropdown-item>
        <b-dropdown-item disabled>Disabled action</b-dropdown-item>
    </b-dropdown>
</b-dropdown>

1 ответ 1

0

Событие клика всплывает (bubbles) наверх по DOM-дереву. Это значит, что слушатели на клике родителя отработают, если событие произойдет на потомках. Для того, чтобы отменить всплытые, используется event.stopPropagation(). Причем отменить всплытие можно на любом уровне.

function log(event) {
  console.log(event.currentTarget.className);
}

function logAndStop(event) {
  event.stopPropagation();
  console.log(event.currentTarget.className);
}
<div class="root" onclick="log(event)">
  <div class="parent" onclick="log(event)">
    <div class="child" onclick="log(event)">Bubbling up to top</div>
  </div>
</div>

<hr>

<div class="root" onclick="log(event)">
  <div class="parent" onclick="logAndStop(event)">
    <div class="child" onclick="log(event)">Stop bubbling to root</div>
  </div>
</div>

<hr>

<div class="root" onclick="log(event)">
  <div class="parent" onclick="log(event)">
    <div class="child" onclick="logAndStop(event)">Stop bubbling at all</div>
  </div>
</div>

Среда исполнения не имеет значения. Это может быть Vue, Angular, React или просто ванильный JS. Все они дают средства работать с Event объектом.

<span @click="(event) => event.stopPropagation()">Log me</span>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.