Vue中事件修饰符与键盘事件

目录

事件修饰符

prevent:阻止默认事件

stop:阻止事件冒泡

once：事件只触发一次

capture：使用事件的捕获模式

 self:与当前事件一致时触发

passive：事件的默认行为立即执行

  键盘事件

---

事件修饰符

Vue中的事件修饰符：

1、prevent:阻止默认事件；

2、stop:阻止事件冒泡；

3、once：事件只触发一次；

4、capture：使用事件的捕获模式；

5、self：只有event.target是当前操作的元素时才触发事件；（只有和当前事件触发的标签一致时才会触发）

6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕

prevent:阻止默认事件

点完之后不会发生默认事件

 <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js">script>
 
<div id="root">
    <a :href="url" @click.prevent="show">点击去百度a>
div>
 
 
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            url:"http://baidu.com"
        }
    }
script>

点完超链接不会发生跳转，因为prevent阻止了a标签的默认事件（跳转）

stop:阻止事件冒泡

div和button都有show事件，当点击按钮时，button会触发show，执行完成后，冒泡到外层，div的show也会触发

    <div @click="show">
        <button @click.stop="show">小按钮button>
    div>
 
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        methods:{
          show(e){
              console.log(e.target)
             alert("hello")
          }
    }