关于Vue 修饰符capture 的使用

原文： http://blog.csdn.net/wangxiaoxiaosen/article/details/73849455

.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="https://cdn.bootcss.com/vue/2.4.2/vue.min.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>

关于Vue 修饰符capture 的使用

推荐阅读更多精彩内容