1.什么是冒泡事件

在html中，标签的嵌套，点击内部标签绑定事件，也会触发外部标签绑定的事件，例子：

<div class='Out' onclick='OutFunction(event)'>
     <div class='Middle'>
          <div class='Inner' onclick='InnerFunction(event)'></div>
     </div>
</div>

类名为Inner的div被嵌套在类名为Out的div中，当需要点击触发Inner的事件时,也触发了Out的事件。

2.如何阻止冒泡事件

为什么要阻止冒泡事件

像上面的例子中，如果两个事件触发逻辑方法起冲突，则需要阻止事件冒泡，在点击内层方法的时候，阻止外层方法的调用。

如何阻止事件冒泡

在原生代码中如何实现

在内部绑定的方法中调用event的阻止冒泡事件方法。在正常的代码逻辑中添加以下代码即可

<script type='text/javascript'>
     function InnerFunction(e){
         ... 正常业务逻辑 ...

         //如果提供了事件对象，则这是一个非IE浏览器 
         if ( e && e.stopPropagation ) 
              //因此它支持W3C的stopPropagation()方法 
              e.stopPropagation(); 
         else 
              //否则，我们需要使用IE的方式来取消事件冒泡 
              window.event.cancelBubble = true; 
         }
     }
</script>

在vue代码中如何实现

<div @click.stop="OpenMessageSubmit()" >来都来啦，留个脚印吧</div>

只需要在点击后添加.stop即可:@click.stop

原博主的网站地址:https://zhuanlan.zhihu.com/p/372483484