Vuejs事件修饰符

时间:2018-02-20 08:30:22

标签: vue.js vuejs2

这是from the docs

  

@click.prevent.self会阻止所有点击,而@click.self.prevent只会阻止对元素本身的点击。

我试图制作一个小提琴来实际阻止所有点击但是不成功。有人可以详细说明文档中这一行的实际含义吗?

小提琴:



var app = new Vue({
  el: '#appp',
  methods: {
    logger(arg) {
      console.log(arg);
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="appp">
  <div @click.prevent.self="logger('1')"> 1
    <br>
    <div @click.prevent.self="logger('2')"> ..2
      <br>
      <div @click.prevent.self="logger('3')"> ....3

      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:4)

查看.prevent.self如何互动的最佳方式之一是查看the Vue compiler的输出:

.prevent.self

on: {
    "click": function($event){
        $event.preventDefault();
        if($event.target !== $event.currentTarget)
            return null;
        logger($event)
    }
}

.self.prevent

on: {
    "click": function($event){
        if($event.target !== $event.currentTarget)
            return null;
        $event.preventDefault();
        logger($event)
    }
}

这两个代码块之间的关键区别在于操作顺序很重要,.prevent.self会阻止来自其子代的事件,但不会运行任何代码,但是.self.prevent {1}}只会取消自己直接创建的事件,并完全忽略子请求。

演示:

&#13;
&#13;
var app = new Vue({
  el: '#appp',
  data: {log:[]},
  methods: {
    logger(arg) {
      this.log.push(arg);
    }
  }
});
&#13;
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="appp" style="display: flex; flex-direction: row;">
  <form @submit.prevent="logger('form')" style="width: 50%;">
    <button>
      <p @click.prevent.self="logger('prevent.self')">
        prevent.self 
        <span>(child)</span>
      </p>
      <p @click.self.prevent="logger('self.prevent')"> 
        self.prevent 
        <span>(child)</span>
      </p>
      <p @click.prevent="logger('prevent')">  
        prevent 
        <span>(child)</span>
      </p>
      <p @click.self="logger('self')">  
        self
        <span>(child)</span>
      </p>
      <p @click="logger('none')"> 
        none 
        <span>(child)</span>
      </p>
    </button>
  </form>
  <pre style="width: 50%;">{{log}}</pre>
  </div>
</div>
&#13;
&#13;
&#13;