vue-event.modifier

事件修饰符

by li gang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

<body>
  <!-- 不接受冒泡上来的事件 -->
  <div id="app" @click.self="clickApp($event)">
    <button @click="clickBtn($event)">通过event阻止行为</button>
    <!-- 方法处理器，不能使用clickBtn() -->
    <a href="http://blog.csdn.net/ligang2585116" target="_blank" @click.prevent.self="clickBtn">Button<span>阻止所有的点击</span></a>
    <a href="http://blog.csdn.net/ligang2585116" target="_blank" @click.self.prevent="clickBtn">Button<span>只会阻止元素上的点击</span></a>
  </div>
</body>

CSS

#app {
  height: 200px;
  width: 500px;
  border: 1px solid red;
}

span {
  display: inline-block;
  border: 1px solid blue;
}

JavaScript

const app = new Vue({
  el: '#app',
  methods: {
    clickApp(event) {
        console.log('clickApp');
        console.log(event);
      },
      clickBtn(event) {
        if (event) {
          event.stopPropagation();
          event.preventDefault();
        }
        console.log('clickBtn');
      }
  }
});