vue事件修饰符

最新推荐文章于 2023-12-22 12:19:23 发布

你若盛开风景自来

最新推荐文章于 2023-12-22 12:19:23 发布

阅读量102

点赞数

分类专栏： vue 文章标签： vue事件修饰符

本文链接：https://blog.csdn.net/li1484155613/article/details/102154873

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

事件冒泡：当点击按钮时控制台：触发了btn上面的事件触发了div的点击事件
阻止事件冒泡：@click.stop=small 触发了btn上面的事件
阻止默认行为 @click.pervent
捕获触发事件 @click.capture
只有点击当前元素时才触发 @click.self
使用once只触发一次 @click.once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <div class="box" @click=big>
        <input type="button" value="点击我试试看" @click=small>
    </div>

    <!-- 阻止事件冒泡 -->
    <div class="box" @click=big>
        <input type="button" value="点击我试试看" @click.stop=small>
    </div>

    <!-- 阻止事件默认行为 -->
    <a href="http://www.baidu.com" @click.prevent=big>阻止默认行为</a>


    <!-- 阻止自己的冒泡行为 ,只有点击当前元素时才触发-->
     <div class="box" @click.self=big>
        <input type="button" value="点击我试试看" @click=small>
    </div>



    <!-- 触发捕获事件 -->
    <div class="box" @click.capture=big>
        <input type="button" value="点击我试试看" @click=small>
    </div>
    

    <!-- 事件只触发一次 -->
    <input type="button" value="点击我试试看" @click.once=small>
    
    
    


</div>
<script>
    new Vue({
        el:"#app",
        data:{},
        methods:{
            big(){
                console.log("触发了div的点击事件")
            },
            small(){
                console.log("触发了btn上面的事件")
            }
        }
    })
</script>
    
</body>
</html>