阻止事件冒泡

面试的时候遇到一个问题
需要用css 去阻止事件冒泡
so 做个笔记

css阻止冒泡

.none{
　　pointer-events: none;
　　cursor: default;
　　opacity: 0.6;
}

jQuery阻止冒泡
并兼容IE

if(event && event.stopPropagation){

    event.stopPropagation();  //  w3c 标准

}else{

   event.cancelBubble = true;  // ie 678  IE浏览器

}

 

vue阻止冒泡

 

<button @click=test($event)> vue阻止冒泡 </button>

 

methods:{

 

    test:function(event){

 

            event.cancelBubble = true;

 

    }

}

 

或者在标签中直接阻止 简便写法

<button @click.stop> vue阻止冒泡 </button>

 

{

添加一点知识点

<!-- 阻止单击事件冒泡 -->

<a v-on:click.stop="doThis"></a>

 

<!-- 提交事件不再重载页面 -->

<form v-on:submit.prevent="onSubmit"></form>

 

<!-- 修饰符可以串联 -->

<a v-on:click.stop.prevent="doThat"></a>

 

<!-- 只有修饰符 -->

<form v-on:submit.prevent></form>

 

<!-- 添加事件侦听器时使用事件捕获模式 -->

<div v-on:click.capture="doThis">...</div>

 

<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->

<div v-on:click.self="doThat">...</div>

 

@click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击

}