阻止事件冒泡

1.原生js里面阻止事件冒泡是e.stopPropagation();

2.在vue中如果需要阻止事件冒泡，可以给事件后面添加修饰符：@click.stop()

3.阻止默认事件：

        1）原生js阻止默认事件

<a href="http://baidu.com" @click="goBai">百度一下</a>

//原生js阻止默认事件
<script>
    new Vue({
        el: "#app",
        data: {

        },
        methods: {
            goBai(e) {
                //js里面阻止默认事件
                e.preventDefault();
            }
        },
    })
</script>

        2）vue修饰符@click.prevent

<a href="http://baidu.com" @click.prevent="goBai">百度一下</a>
<!-- .prevent vue里修饰符用于阻止默认事件 -->

4.特殊的修饰符

<!-- .self 修饰符 self自己的意思  只用自己本身的元素触发这个事件才会被调用 -->
        <div class="fangkuai1" @click.self="dianji"></div>

<!-- .capture  捕获  用来捕获父元素事件，当存在事件冒泡时，优先执行 放到哪优先执行谁 -->
        <div class="" @click.capture="">
            <!-- <div class="" @click.capture="">

            </div> -->
        </div>

<!-- once修饰符，表示当前事件只能执行一次 -->
        <!-- 使用方法 -->
        <button @click.once="">只能执行一次</button>

<button @dblclick="">双击事件</button>
<button @mousemove="">鼠标移动</button>