Запустить функцию при нажатии на родительский элемент, но НЕ на дочерний элемент?

Question

Я пытаюсь запустить некоторый код, чтобы закрыть модальное окно, когда вы щелкаете за пределами диалогового окна. Проблема заключается в том, что у меня есть маска, которая затемняет страницу за диалоговым окном, которое я использую для настройки функции закрытия. У него есть вложенное диалоговое окно, поэтому, когда вы нажимаете на само диалоговое окно, оно закрывает его. Как я могу щелкнуть диалоговое окно в обычном режиме, при этом родительский элемент по-прежнему закрывает модальное окно при нажатии?

Вот примерное представление о том, что я делаю сейчас:

<div class="modal-background" @click="dialogOpen=false" v-if="dialogOpen">
  <div class="dialog-box">
    dialog content
  </div>
</div>

Answer 1

Вы можете определить, по какому элементу щелкнули Event.target.

new Vue({
  el: '#app',

  data() {
    return {
      dialogOpen: true
    }
  },

  methods: {
    closeDialog(e) {
      if (e.target.classList.contains('modal-background')) {
        this.dialogOpen = false;
      } 
      else {
        // Dialog box was clicked
      }
    }
  }
})

.modal-background {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
}

.dialog-box {
  width: 400px;
  height: 70px;
  margin: 2em auto;
  background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="modal-background" @click="closeDialog" v-if="dialogOpen">
    <div class="dialog-box">
      dialog content
    </div>
  </div>
</div>