【问题标题】: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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-01-14
      • 2021-05-18
      • 2012-05-03
      • 2019-07-07
      • 1970-01-01
      • 1970-01-01
      • 2019-02-27
      相关资源
      最近更新 更多