vue事件冒泡实例讲解

事件冒泡

阻止冒泡

//1. 原生js方式，依赖于事件对象
<p class="container">
    <p @click="pClick">
        <p @click="pClick">
            <button @click="btnClick($event)">点击</button>
        </p>
    </p>
</p>
<script type="text/javascript">
    var vm = new Vue({
        el: ".container",
        methods: {
            pClick() {
                console.log('这是p')
            },
            pClick() {
                console.log('这是p')
            },
            btnClick(e) {
                console.log('这是button')
                e.stopPropagation()//节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
            }
        }
    })
</script>

//2. vue方式不依赖于事件对象   @click.stop

事件默认行为

1. 原生js方式，依赖于事件对象   e.preventDefault();
<p class="container">
    <a href="#" @click="aClick($event)">a链接</a>
</p>
<script type="text/javascript">
    var vm = new Vue({
        el: ".container",
        methods: {
            aClick(e){
                console.log("链接")
                e.preventDefault();
            }
        }
    })
</script>
2.  vue方式     @click.prevent