Question

因此，当您单击蓝色内容时，我想隐藏它，但是如果您单击子元素（例如h2，a，p等），则不希望隐藏它。这可能吗？

请看小提琴

html

<html>
  <head></head>
  <body>
    <div id="app">
      <div v-if="modal" id="content" @click="toggle">
          <h3>
            Name
          </h3>
          <span>
            <a href="">Like this (don't close if clicked)</a>
          </span>
      </div>
      <button @click="toggle">Toggle</button>
    </div>
  </body>
</html>

.js

new Vue({
    el: '#app',
  data: {
    modal: true
  },
  methods: {
    toggle: function( ){
        this.modal = !this.modal
    }
  }
});

.css

a {
  color: white
}
#content {
  width: 300px;
  height: 300px;
  background: blue;
  color: white;
}

提琴：http://jsfiddle.net/awu752mr/6/

Answer 1

我相信这就是v-on:click.self修饰符的作用。 See here in the docs.

Answer 2

@LShapz回答说，应该使用修饰符= .self（Vue风格）。

另一种方法是比较$event.target === $event.currentTarget（不建议用于您的用例，但是将来您可以将这两个属性用于其他情况）。

Vue.config.productionTip = false
new Vue({
	el: '#app',
  data: {
  	modal: true
  },
  methods: {
  	toggle: function(ev){
    	if(ev.target === ev.currentTarget) this.modal = !this.modal
    }
  }
});

a {
  color: white
}
#content {
  width: 300px;
  height: 300px;
  background: blue;
  color: white;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <div v-if="modal" id="content" @click="toggle($event)">
    <h3>
      Name
    </h3>
    <span>
      <a href="">Like this</a>
    </span>
  </div>
  <button @click="toggle">Toggle</button>
</div>

单击主div时隐藏div，但单击子div，href，span等时不隐藏

2 个答案: