标签：触发 阻止 点击 html 冒泡 stopPropagation 事件

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

标签：触发,阻止,点击,html,冒泡,stopPropagation,事件
来源： https://www.cnblogs.com/czjjy/p/16597817.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。