阻止事件穿透的多个方法，总有一个能解决你的问题

<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>