【基础】阻止事件冒泡

阻止事件冒泡

• html

<div @click="show2()">
    <button @click="show($event)">阻止事件冒泡</button>
</div>

• js

<script>
    // 初始化数据
    window.onload = function () {
        // vue
        var vueApp = new Vue({
            el: '#app',
            data: {message: '这里是测试内容'},
            methods: {
                show: function (event) {
                    alert(1);
                    // 由于使用了cancelBubble = true 阻止事件冒泡,所以则不会执行show2()
                    event.cancelBubble = true;
                },
                show2: function (message) {
                    alert(2);
                }
            }
        });
    };
</script>