vue中事件修饰符的基本使用

最新推荐文章于 2024-02-15 20:59:47 发布

Annaluo

最新推荐文章于 2024-02-15 20:59:47 发布

阅读量416

点赞数

分类专栏： vue相关文章标签： vue.js javascript 前端 html5 css3

本文链接：https://blog.csdn.net/Annaluo/article/details/122793954

版权

vue相关专栏收录该内容

6 篇文章 0 订阅

订阅专栏

.stop-------- 阻止冒泡。（从内到外）

.prevent--------阻止默认事件

.capture-------添加事件侦听器时使用事件捕获模式（从外到内）

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

.once--------事件只触发一次

.stop和.self的区别：

1，.stop是真正意义上的阻止冒泡

2，.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为

代码如下：（直接复制到html文件即可运行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-事件修饰符</title>
    <style>
        .box{
            width: 100px;
            height: 200px;
            background-color: palegoldenrod;
        }
        .bigBox{
            width: 300px;
            height: 300px;
            background-color: paleturquoise;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- .stop --阻止冒泡，从内到外 -->
        <div class="box" @click="boxClick()">
            <button @click.stop="btnClick()">点我</button>
        </div>
        
        <!-- 阻止默认事件 -->
        <a href="https://www.jd.com" @click.prevent='buy()'>我要买东西</a>

        <!-- 添加事件侦听器时使用事件捕获模式.从外往内走 -->
        <div class="box" @click.capture="boxClick()">
            <button @click="btnClick()"> click me </button>
        </div>

        <!-- self 只当事件在该元素本身触发时触发回调（比如不是子元素）-->
        <div class="box" @click.self = "boxClick()">
            <button @click="btnClick()">点我呀</button>
        </div>

        <div class="bigBox"  @click="bigBoxClick()">
            <div class="box" @click.self = "boxClick()">
                <button @click="btnClick()">hei，点我也</button>
            </div>
        </div>
    </div>
    <script  src="lib/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            methods:{
                btnClick(){
                    console.log('点击了按钮')
                },
                boxClick(){
                    console.log('点击了盒子')
                },
                buy(){
                    console.log('没有钱了')
                },
                bigBoxClick(){
                    console.log('点击了大盒子')
                }
            } 
        })
    </script>
</body>
</html>

运行效果如下：

Annaluo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中事件修饰符的基本使用

.stop-------- 阻止冒泡。（从内到外）.prevent--------阻止默认事件.capture-------添加事件侦听器时使用事件捕获模式（从外到内）.self---------只当事件在该元素本身触发时触发回调。（比如不是子元素）.once--------事件只触发一次.stop和.self的区别：1，.stop是真正意义上的阻止冒泡2，.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为代码如下：（直接复制到html文件即可运行）
复制链接

扫一扫