vue.js 中的.capture事件修饰符的用法。

最新推荐文章于 2024-05-17 09:38:48 发布

有一个王小森

最新推荐文章于 2024-05-17 09:38:48 发布

阅读量2.4w

点赞数 13

分类专栏： vue.js 文章标签： vue-js capture 事件修饰符

本文链接：https://blog.csdn.net/wangxiaoxiaosen/article/details/73849455

版权

vue.js 专栏收录该内容

43 篇文章 3 订阅

订阅专栏

.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式

即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>.capture事件修饰符</title>
    <style type="text/css">
        * {
            margin: 0 auto;
            text-align:center;
            line-height: 40px;
        }
        div {
            width: 100px;
        }
        #obj1 {
            background: deeppink;
        }
        #obj2 {
            background: pink;
        }
        #obj3 {
            background: hotpink;
        }#obj4 {
             background: #ff4225;
         }
    </style>
    <script src="vue.js"></script>
</head>
<body>

<div id="content">
    <div id="obj1" v-on:click.capture="doc">
        obj1
        <div id="obj2" v-on:click.capture="doc">
            obj2
            <div id="obj3" v-on:click="doc">
                obj3
                <div id="obj4" v-on:click="doc">
                obj4
                <!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3；
                由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
                -->
            </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript">
    var content = new Vue({
        el: "#content",
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.id= event.currentTarget.id;
                alert(this.id)
            }
        }
    })
</script>
</body>

</html>