在使用 Backbone.js 构建前端应用程序时，你可能会遇到需要停止事件传播的情况。例如，当用户单击应用程序中的一个按钮时，你可能希望阻止该事件继续传播并触发其他处理程序。本文将介绍如何在 Backbone.js 中实现这一目标。
停止事件传播的方法
在 Backbone.js 中，可以使用 stopPropagation() 方法来停止事件传播。这个方法是 JavaScript 事件对象（Event Object）的原生方法，它可以防止当前事件冒泡到父级元素或祖先元素。
例如，假设我们有以下 HTML 结构：
<div id="parent"> <div id="child"></div> </div>
我们可以在 Backbone.js 视图中为 #child 元素添加一个点击事件处理程序，并在该处理程序中调用 event.stopPropagation() 来阻止事件传播：
-- -------------------- ---- -------
--- --------- - ----------------------
------- -
------ -------- ---------
--
-------- --------------- -
------------------------
---------------- ------ -----
-
---当用户单击 #child 元素时，只会触发 onClick() 处理程序，而不会触发 #parent 元素上的任何事件处理程序。
示例代码
下面是一个完整的 Backbone.js 视图示例，演示如何在应用程序中使用 stopPropagation() 方法来停止事件传播：
-- -------------------- ---- -------
--- ---------- - ----------------------
------- -
------ --------- ---------------
--
-------------- --------------- -
---------------- ------- -----
-
---
--- --------- - ----------------------
------- -
------ -------- --------------
--
------------- --------------- -
------------------------
---------------- ------ -----
-
---
--- ---------- - --- ------------ --- --------- ---
--- --------- - --- ----------- --- -------- ---在此示例中，我们创建了两个视图：ParentView 和 ChildView。当用户单击 #child 元素时，只会触发 ChildView 中的 onClickChild() 处理程序；而当用户单击 #parent 元素时，则会触发 ParentView 中的 onClickParent() 处理程序。
结论
通过使用 stopPropagation() 方法，可以轻松地阻止 Backbone.js 中的事件传播。这对于构建复杂的应用程序非常重要，因为它允许你控制事件处理程序的执行顺序并避免意外的行为发生。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27297