面試的時候遇到一個問題
需要用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 只會阻止元素上的點擊
}