vue事件方法修饰符

vue事件方法修饰符

1、vue事件方法子级阻止父级事件冒泡

1、描述：在触发子集区方法时候父级方法会冒泡

<template>
  <!--父组件-->
  <div>
    <div @click="fatherMethod">
      父级区
      <div @click="childMethod">子级区</div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {

      }
    },
    methods: {
      fatherMethod(){
        console.log('父级事件');
      },
      childMethod(){
        console.log('子级事件');
      }
    }
  }
</script>
<style>

</style>

2、解决方法：子级方法添加事件修饰符stop：

<template>
  <!--父组件-->
  <div>
    <div @click="fatherMethod">
      父级区
      <div @click.stop="childMethod">子级区</div>
    </div>
  </div>
</template>

2、阻止点击右键默认事件修饰符
点击右键时，会弹出时间默认属性

解决方法：阻止默认事件修饰符

<!--阻止默认事件修饰符-->
      <div @click.right.prevent="clickRight">点击鼠标右键默认事件</div>

3、self修饰符

可以不采用stop修饰符而采用self修饰符来阻止冒泡，即只有在点击到有self修饰的方法时候，该方法才会执行

<div @click.self="fatherMethod">
      父级区
      <!--self修饰符-->
      <div @click="childMethod">子级区</div>
    </div>

4、ctrl修饰符

按下ctrl键触发

<input type="text" @keydown.ctrl="ctrlEvent">

5、enter修饰符

<input type="text" @keydown.enter="submit">

6、delete修饰符

删除

<input type="text" @keydown.delete="deleteEvent">

阻止删除添加prevent

<input type="text" @keydown.delete.prevent="deleteEvent">

7、空格修饰符space

<input type="text" @keydown.space="spaceEvent">

阻止输入空格space.prevent

<input type="text" @keydown.space.prevent="spaceEvent">