本文将介绍 stopPropagation() 方法以及有用的代码示例。 之后，我们将了解 stopPropagation() 和 PreventDefault() 方法之间的区别。

stopPropagation() 事件方法 - 父元素无法使用此方法访问事件 方法。一般来说，创建此函数是为了防止多次调用同一事件 传播。例如，如果一个按钮元素包含在 div 标签内，并且它们都有一个 onclick 事件，每当我们尝试激活与按钮元素关联的事件时， 与 div 元素关联的事件也会被激活，因为该 div 元素确实是 按钮元素。

语法

event.stopPropagation();

stopPropagation() 方法将阻止父级访问事件，可用于 解决这个问题。

示例 1

   
   
   
   
   
   


   
Let us understand the stopPropagation() Method
   
Test the results by clicking the DIV(1) & DIV(2) as shown below in the color boxes:
   
This is my Second DIV(2)
      
This is my First DIV(1)
   
   Check to stop propagation event:
   
   

   
Because my First DIV(1) is inside Second DIV(2), both DIVs get clicked when you click on First DIV(1).
   
   
You can test it by check and uncheck the stop propagation checkbox, to get the outcome.
   
You can stop the current event from propagating by using the stopPropagation() method.
立即学习“Java免费学习笔记（深入）”；
   

单击外部 div“my Second DIV(2)”后，确认框仅显示一次，如下所示。

思乐微信商城微分销系统

思乐微信商城微分销系统是以.net+access/mssql进行开发的微信分销系统。基于微信朋友圈的传播，是打造以分销商为中心的全新微信分销体验。让粉丝实时有效的获取朋友圈流量并快速分享购买分佣。因为是基于微信，所以要在微信上体验才更好。关注我们的微信核心功能：1、自动提示用户关注微信，解决一般程序无关注微信公众号的过程2、只要通过链接进一次，不过好久注册，什么方面注册，只要是用微信注册的，都会算

下载

此外，如果单击内部 div“my First DIV(1)”，确认框将显示两次，如下所示。

接下来，单击“确定”按钮后，将显示外部 div“我的第二个 DIV(2)”确认框。

只要选中一个复选框并单击内部 div“my First DIV(1)”，如 截图如下。确认框仅出现一次。

示例 2

在这个例子中，让我们了解 event.stopPropagation() 方法是如何实现的， 这将导致执行按钮元素的单个函数。

   
   
   
   
   
   
   
   
   
   


   
The button element's single function will be executed with stopPropagation() Method
   
   
Test the result by clicking the button as shown below in the color boxe:
   

      
         Button
      
   
   

   

preventDefault() 方法 - 这是在事件接口中找到的方法。通过使用这种方法， 阻止浏览器执行所选元素的默认操作。仅当 如果该技术能够做到这一点，则事件是可取消的。例如，滚动和滚轮事件是 一些无法避免的事件的例子。

语法

preventDefault() Method

示例 3

让我们了解如何阻止链接跟随此示例中的 URL，以便浏览器无法访问 访问另一个页面。

   
   
   
   
   


   
      Welcome to Tutorialspoint!
   
   

单击该链接，您将看到确认框，显示“此事件已被阻止，您无法访问该 URL。”