单击父元素而不是子元素时运行函数？

【问题标题】：Run a function when clicking on a parent element but NOT child element?单击父元素而不是子元素时运行函数？
【发布时间】：2019-01-25 05:52:11
【问题描述】：

当您在对话框外单击时，我正在尝试运行一些代码来关闭模式。问题是我有一个蒙版，它使我用来定位关闭功能的对话框后面的页面变暗。它具有嵌套在其中的对话框，因此当您单击对话框本身时，它会关闭它。如何正常单击对话框，同时仍然让父元素在单击时关闭模态？

这是我现在正在做的一个粗略的想法：

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

【问题讨论】：

标签： vue.js dialog

【解决方案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>

【讨论】：