场景1：模态框的遮罩允许点击关闭模态框，同时模态框里有其他事件，模态框和遮罩z-index值相同，此时点击模态框内的任意区域会引起事件冒泡

处理方式

1.原生js

  1. //点击button的方法
  2.     function clickBtn(event){
  3.         //具体的事件内容。。。。。   
  4.         stopBubbling(event); 
  5.     }
  6.     function stopBubbling(e) {
  7.         e = window.event || e;
  8.         if (e.stopPropagation) {
  9.             e.stopPropagation();      //阻止事件 冒泡传播
  10.         } else {
  11.             e.cancelBubble = true;   //ie兼容
  12.         }
  13.     }

2.vue

给模态框添加 @click.stop

例：

  1. <transition name="fade">
  2.       <div class="public-mask" v-show="visible">
  3.       </div>
  4.     </transition>
  5.     <div class="public-modal-wrap" v-if="visible" @click="handleMask()">
  6.       <div class="public-modal clearfix" v-if="type=='modal'" :style="modalWidth" v-show="visible" @click.stop>
  7.         <div class="modal-header">
  8.           {{title}}
  9.           <span class="icon-close" @click="close()"></span>
  10.         </div>
  11.         <div class="modal-main">
  12.           <slot></slot>   <!-- content slot -->
  13.         </div>
  14.         <div class="modal-footer">
  15.           <div class="ok-btn" @click="ok()">{{okText}}</div>
  16.           <div class="cancel-btn" @click="close()">取消</div>
  17.         </div>
  18.       </div>
  19.     </div>

场景2：多层DIV叠加的js事件穿透

JS阻止事件冒泡 - 图1

这个示意图中

C方块在A容器中（A容器边框为红色）

D方块在B容器中（B容器边框为绿色）

A B部分重叠，B在上层。

不做任何处理的话，C方块永远无法被点到，因为B把它盖住了。

解决方式：主要利用的是css中的pointer-events属性，将A B容器都设置为none，不响应鼠标事件，同时，将CD显式设置为auto，让他们响应鼠标事件，这样一来，B就不会挡住A了