阻止事件冒泡

面试的时候遇到一个问题
需要用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 只会阻止元素上的点击

}

 

 

转载于:https://www.cnblogs.com/king94Boy/p/11344860.html