ReactJS 是一款流行的前端开发框架，许多应用程序都使用它来创建用户界面。ReactJS 通过将组件分为单独的部分来实现可维护性和易扩展性，这些组件可以使用不同的生命周期方法和事件来处理用户交互。
在 ReactJS 中，SyntheticEvent 对象封装了浏览器原生事件，并提供了跨浏览器支持和方便的事件处理机制。事件处理程序可以使用 SyntheticEvent 对象上的几种方法来控制事件如何传播，其中包括 stopPropagation() 方法。stopPropagation() 方法是用于阻止事件从当前元素向父级元素传播的方法。
然而，很多人认为 stopPropagation() 方法只能在 ReactJS 事件中使用，实际上它可以在任何 JavaScript 事件中使用。下面是一个简单的示例，演示了如何在普通的 JavaScript 事件处理程序中使用 stopPropagation() 方法：
-- -------------------- ---- -------
--------- -----
------
------
------------------------ ----------
-------
------
---- ---------- ------------- ------ ------- ------ ----------------- -------
---- ---------- ------------- ------ ------- ------ ----------------- --------------
------
--------
---------------------------------------------------------- --------------- -
------------------ ----------
---
---------------------------------------------------------- --------------- -
------------------ ----------
------------------------
---
---------
-------
-------在上面的示例中，当用户单击 #inner 元素时，会触发 inner clicked 日志消息，并且事件不会传播到 #outer 元素。如果删除 event.stopPropagation() 方法，则会触发 inner clicked 和 outer clicked 两条日志消息。
总之，stopPropagation() 方法可以在 ReactJS 事件之外的任何 JavaScript 事件处理程序中使用。这是一个有用的技巧，可以帮助你更好地控制事件的传播和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12473