阻止事件穿透的多個方法，總有一個能解決你的問題

<div class="outBox" @click.stop="toDetail">
	最外層box
	<div class="middleBox">
		中間的box
		<div class="insetBox" @click.stop="toMes">
			最裏面的box--點擊跳轉
		</div>
	</div>
</div>

在實際開發中，有時候在事件後面加stop修飾符，並不管用；

那麼我們可以通過給裏面的box事件，使用event.stopPropagation();防止事件穿透；

<div class="insetBox" @click.stop="toMes($event)">
	最裏面的box--點擊跳轉
</div>

toMes(e){
    e.stopPropagation();
}

但是呢，針對某些場景，以上方法並不能解決事件問題；最近在開發企業微信自建H5頁面；我的頁面引入了weui 插件庫；

<div class="outBox" @click.stop="toDetail">
    最外層box
	<div class="middleBox">
		中間的box
		<a href="tel:[phone]">撥打電話</a>
	</div>
</div>




<!--BEGIN dialog2-->
<div class="js_dialog" id="iosDialog2" v-if="openAlert">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd">客戶信息不存在，是否立即創建？</div>
        <div class="weui-dialog__ft">
        	<a href="javascript:" class="weui-dialog__btn weui-dialog__btn_default" @click="closeAlertDialog">取消</a>
    		<a href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary" @click="clickCofirm">去創建</a>
        </div>
    </div>
</div>
<!--END dialog2-->

toDetail(){   //點擊外層div需要打開彈框詢問
    this.openAlert = true;
}

在這種場景下，a標籤的撥打電話功能是沒有事件的，點擊撥打電話的同時也會觸發打開彈框的操作；

這種的解決辦法就是在中間div 加上一個空事件即可解決穿透

<div class="outBox" @click.stop="toDetail">
    最外層box
    <div class="middleBox" @click.stop="">
        中間的box
        <a href="tel:[phone]">撥打電話</a>
    </div>
</div>