Vuejs 事件修饰符

Question

这是来自文档：

@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>

Answer 1

其中一个怎么看的最佳方式.prevent和.self互动正在寻找的输出的Vue的编译：

.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)
    }
}

这两个代码块之间的主要区别在于操作顺序很重要这一事实，a.prevent.self将阻止来自其子项的事件，但不运行任何代码，但 a.self.prevent只会取消由自己直接创建的事件，并忽略孩子要求完全。

演示：

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

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