<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 ответ
Событие клика всплывает (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>