您的位置: 首页  >  文章  >  vue事件修饰符

vue事件修饰符

分类: 文章 • 2022-10-06 22:57:00

事件修饰符

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once事件只触发一次

一、.stop（使用.stop阻止冒泡）

.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件

<style>
    .inner{
        height:150px;
        background-color:lightskyblue;
    }
</style>
<body>
<div id="app">
    <div class="inner"@click="divHandler">
    <input type="button"value="戳他"@click.stop="btnHandler">
    </div>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{},
        methods:{
            divHandler(){
              console.log("这是触发了inner div的点击事件")
            },
    btnHandler(){
                console.log("这是触发了按钮的点击事件")
    }
        },
    })
</script>

加stop:

点击按钮结果

vue事件修饰符

点击蓝色区域

vue事件修饰符

不加.stop

点击按钮结果

vue事件修饰符

点击蓝色区域结果

vue事件修饰符

二、.prevent

<style>
    .inner{
        height:150px;
        background-color:lightskyblue;
    }
</style>
<body>
<div id="app">
    <!--div class="inner"@click="divHandler">
    <input type="button"value="戳他"@click.stop="btnHandler">
    </div>-->
    <a href="http://www.baidu.com"@click.prevent="linkClick">百度一下</a>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{},
        methods:{
            divHandler(){
              console.log("这是触发了inner div的点击事件")
            },
    btnHandler(){
                console.log("这是触发了按钮的点击事件")
    },
            linkClick(){
                console.log("这是触发了链接的点击事件")
            }
        },
    })
</script>

不加.prevent，点击链接可以正常跳转。

加.prevent,显示链接但点击不可跳转，结果如图：

vue事件修饰符

三、.capture

<style>
    .inner{
        height:150px;
        background-color:lightskyblue;
    }
</style>
<body>
<div id="app">
    <div class="inner"@click.capture="divHandler">
    <input type="button"value="戳他"@click="btnHandler">
    </div>
    <a href="http://www.baidu.com"@click.prevent="linkClick">百度一下</a>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{},
        methods:{
            divHandler(){
              console.log("这是触发了inner div的点击事件")
            },
    btnHandler(){
                console.log("这是触发了按钮的点击事件")
    },
            linkClick(){
                console.log("这是触发了链接的点击事件")
            }
        },
    })
</script>
</body>

点击按钮后，先触发div再触发按钮

vue事件修饰符

四、.self

不受捕获或冒泡影响，只有点击这个元素自己，才会触发事件处理函数。

<style>
    .inner{
        height:150px;
        background-color:lightskyblue;
    }
</style>
<body>
<div id="app">
    <div class="inner"@click.self="divHandler">
    <input type="button"value="戳他"@click="btnHandler">
    </div>
    <a href="http://www.baidu.com"@click.prevent="linkClick">百度一下</a>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{},
        methods:{
            divHandler(){
              console.log("这是触发了inner div的点击事件")
            },
    btnHandler(){
                console.log("这是触发了按钮的点击事件")
    },
            linkClick(){
                console.log("这是触发了链接的点击事件")
            }
        },
    })
</script>

点击按钮结果

vue事件修饰符

五、.once

<body>
<div id="app">
    <a href="http://www.baidu.com"@click.prevent.once="linkClick">百度一下</a>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{},
        methods:{
            linkClick(){
                console.log("这是触发了链接的点击事件")
            }
        },
    })
</script>

加上.once，只触发一次事件处理函数。

第一次点击链接结果：

vue事件修饰符

第二次：链接被打开，但控制台不再输出

vue事件修饰符

六、.stop和.self的区别

.self和.stop区别: .self只是阻止自身不执行冒泡触发,不会阻止冒泡继续向外部触发；

                           .stop是从自身开始不向外部发射冒泡信号；

.self结果

vue事件修饰符

.stop结果

vue事件修饰符

总结：

.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行

 

相关推荐