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