Vue——05——事件修饰符

最新推荐文章于 2020-07-28 08:20:45 发布

野生小米椒

最新推荐文章于 2020-07-28 08:20:45 发布

阅读量115

点赞数

分类专栏： VUE框架

本文链接：https://blog.csdn.net/x1037490413/article/details/107047822

版权

VUE框架专栏收录该内容

33 篇文章 0 订阅

订阅专栏

文章目录

一:stop prevent once事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        .inner {
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    
   
   
   
    <div id="app">
        <div class="inner" @click="spread" >
            <!-- 使用.stop阻止冒泡 -->
            <input type="button" value="按钮" @click.stop="show">
             <!-- 使用.prevent阻止默认行为 使用.once只触发一次  事件之间可以连接使用 -->
            <a href="https://blog.csdn.net/x1037490413" @click.prevent.once="linkClick">点击这里进入链接</a>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data:{},
            methods:{
                show(){
                    console.log('这里是点击事件');
                    
                },
                spread(){
                    console.log('这里是inner点击事件');
                    
                },
                linkClick(){
                    console.log('触发了链接的点击')
                }
            }

        })
    </script>
</body>

</html>

二：capture事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        .inner {
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    
   
    
   
   <!-- 使用.capture使用捕获机制  本来冒泡事件会先打印里面的，使用capture打印外面 -->
    <div id="app">
        <div class="inner" @click.capture="spread" >
            <input type="button" value="按钮" @click="show">
            
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data:{},
            methods:{
                show(){
                    console.log('这里是点击事件');
                    
                },
                spread(){
                    console.log('这里是inner点击事件');
                    
                },
                linkClick(){
                    console.log('触发了链接的点击')
                }
            }

        })
    </script>
</body>

</html>

三：self事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        .inner {
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    
   
    
    <!-- 使用.self实现只有点击当前元素的时候，才会触发事件处理函数  本来外面的div是因为点击了里面div的按钮，触发了冒泡事件才打印了外面的div，现在我们使用self事件点击自己才可以触发 -->
    <div id="app">
        <div class="inner" @click.self="spread" >
            <input type="button" value="按钮" @click.self="show">
            
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data:{},
            methods:{
                show(){
                    console.log('这里是点击事件');
                    
                },
                spread(){
                    console.log('这里是inner点击事件');
                    
                },
                linkClick(){
                    console.log('触发了链接的点击')
                }
            }

        })
    </script>
</body>

</html>

四：self和capture的区别

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        .inner {
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>

<body>


    <!-- self和capture的区别
   .self只会阻止自己身上冒泡行为的触发，不会真正阻止冒泡的行为 -->
    <div id="app">
        <div calss="outer" @click="outer">
            <div class="inner" @click.self="spread">
                <input type="button" value="按钮" @click="show">
            </div>
        </div>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                show() {
                    console.log('这里是点击事件');

                },
                spread() {
                    console.log('这里是inner点击事件');

                },
                outer(){
                    console.log('这里是outer点击事件');
                }
            }

        })
    </script>
</body>

</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue——05——事件修饰符

文章目录一:stop prevent once事件二：capture事件三：self事件四：self和capture的区别一:stop prevent once事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫