事件修饰符(3) .capture 添加事件侦听器时使用事件捕获模式

在vue中使用 .capture 来捕获

  <div id="app">
        <div id="inner" @click="innerClick()">
            <input type="button" value="按钮"  @click="btnClick()">
        </div>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        let vm = new Vue({
            el:"#app",
            data:{},
            methods:{
                innerClick(){// 内部div点击事件
                    console.log("内部div点击事件");
                },
                btnClick(){// 按钮点击事件
                    console.log("按钮点击事件");
                }
            }
        })
    </script>

正常点击

 默认点击按钮事件，冒泡是由内到外的，那如何由外到内捕获呢

内部div加上事件修饰符捕获模式

<div id="app">
        <!--.capture 添加事件侦听器时使用事件捕获模式 -->
        <div id="inner" @click.capture="innerClick()">
            <input type="button" value="按钮"  @click="btnClick()">
        </div>
    </div>