Ответ 1
Взгляните на модификаторы событий, v-on:click.stop остановит этот клик от распространения или "пузырения" до родительского элемента.
Запретить нажимать на родителя при нажатии кнопки внутри div
Возможно ли предотвратить запуск функции из элемента <div> при нажатии кнопки внутри div?
При нажатии на элемент кнопки нельзя запускать функцию: toggleSystemDetails? Возможно ли это в Vue?
<div v-on:click="toggleSystemDetails($event, system.id);" class="grid-tile__list-item" v-for="(system, index) in organization.systems" :key="system.id" :class="{'in-viewport fully-in-viewport': system.inview, 'is-xsmall': system.layout === 'xsmall', 'is-small': system.layout === 'small', 'is-medium': system.layout === 'medium', 'is-large': system.layout === 'large'}">
<div class="grid-tile__list-item--overlay">
<button v-on:click="toggleTileOptionsMode($event, system.id, system.name, system.layout)">
Layout Settings
</button>
</div>
Ответы
Ответ 2
как упоминалось в ссылке, предоставленной Джастином, вы можете. .self в событии click
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
Ответ 3
Вот как справиться с этой проблемой.
Скажем, у вас есть родительский элемент и несколько дочерних элементов.
1. (1-й случай) Вы хотите, чтобы родительский клик не влиял на дочерние клики. Просто поместите в родительский элемент модификатор .self:
<div class="parent" @click.self="parent"> <!-- .self modifier -->
<span class="child" @click="child1">Child1</span>
<span class="child" @click="child2">Child2</span>
<span class="child" @click="child3">Child3</span>
</div>
примечание: если вы удаляете .self при щелчке по дочернему .self, родительское событие также срабатывает.
2. (2-й случай) У вас есть код ниже:
<div @click="parent">
Click to activate
<i class="fa fa-trash" title="delete this" @click="delete_clicked"></i>
</div>
Проблема в:
- Когда вы щелкаете элемент значка, родительский щелчок срабатывает. (ты не хочешь этого)
- Вы не можете использовать 1-е решение, потому что хотите запустить родительское событие, даже если щелкнул текст "Нажмите, чтобы активировать".
Решением этой проблемы является .stop модификатора .stop к элементу icon, чтобы родительское событие не сработало.