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