Запретить нажимать на родителя при нажатии кнопки внутри 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>

Ответ 1

Взгляните на модификаторы событий, v-on:click.stop остановит этот клик от распространения или "пузырения" до родительского элемента.

Ответ 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, чтобы родительское событие не сработало.

Смотрите это в действии здесь