vue2.x self capture事件修饰符学习

最新推荐文章于 2022-12-06 17:41:56 发布

胖鹅68

最新推荐文章于 2022-12-06 17:41:56 发布

阅读量239

点赞数

分类专栏： Vue2.x、vuex、iview、vux

本文链接：https://blog.csdn.net/hbiao68/article/details/100165632

版权

Vue2.x、vuex、iview、vux 专栏收录该内容

68 篇文章 3 订阅

订阅专栏

文章目录

文章参考

https://cn.vuejs.org/v2/guide/events.html#事件修饰符
https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

问题描述：

今天在写self Demo的时候,使用的大的div套小的div,在外层div中定义了self方法，发现怎么点击都生效，跟不使用self就没有区别，感觉有点模糊了，因此查看了相关资料，自己总结了一下

概念解释

当在 event.target 是当前元素自身时触发处理函数
即事件不是从内部元素触发的(不是捕获或者冒泡获取)

<div v-on:click.self="doThat">...</div>

案例

<!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="./js/vue.js"></script>
</head>
<style>
.bigbox{
    height: 200px;
    width: 200px;
    background: red;
}

.middlebox{
    height: 150px;
    width: 150px;
    background: blue;
}

.littlebox{
    height: 100px;
    width: 100px;
    background: green;
}


</style>
<body>
    <div id="app">
        <div class="bigbox" @click='bigAction'>
            <div class="middlebox" @click.self='middleAction()'>
                <div class="littlebox" @click='littleActionDefault()'>

                </div>
            </div>
        </div>
        <hr/>
        <div class="bigbox" @click.capture='bigAction'>
            <div class="middlebox" @click.capture.self='middleAction()'>
                <div class="littlebox" @click.capture='littleActionDefault()'>

                </div>
            </div>
        </div>
    </div>
</body>
<script> 
var app = new Vue({
    // 指明Vue的控制节点（控制范围）
    el: '#app',
    // 定义一个方法，返回一个JSON 数据
    data: function () {
        return {
            username: '优就业'
        }
    },
    methods: {
        bigAction: function (){
            console.log('bigAction');
        },
        middleAction: function () {
            console.log('middleAction');
        },
        littleActionDefault: function (){
            console.log('littleAction');
        }
    }
})
</script>
</html>

案例解析

浏览器默认执行的是“冒泡事件”
如果想执行“捕获事件”，则需要 .capture 修饰; @click.capture.self='middleAction()'
如果点击最小的div, 中间div事件是使用 self修饰，不管是捕获还是冒泡事件都被接收到了，但是中间div的事件不被执行
直接点击中间的.self事件才会被执行，即满足上面的原则，event.target 是当前元素自身时触发的，并且事件处理不接受冒泡和捕获

胖鹅68

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2.x self capture事件修饰符学习

文章目录文章参考问题描述：概念解释案例案例解析文章参考https://cn.vuejs.org/v2/guide/events.html#事件修饰符https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6问题描述：今天在写self Demo的时候,使用的大的div套小...
复制链接

扫一扫