当在 Ember.js 应用程序中使用事件委托时，有时候需要从我们所需的目标元素之前的所有祖先元素中解析出正确的元素。 在 Ember.js 中，我们可以使用 {{action}} 辅助函数来处理它，但是 {{action}} 不会处理目标元素之前的任何祖先元素（这些祖先元素通过冒泡事件传递而来），因此需要使用帮助程序来解决这个问题。 为了解决这个问题，可以使用 ember-ignore-children-helper npm 包。
安装
可以通过以下命令安装 ember-ignore-children-helper：
ember install ember-ignore-children-helper
使用方法
安装后，我们可以在模板中使用 {{ignore-children}} 帮助函数，以忽略目标元素之前的所有祖先元素。具体来说，可以将目标元素的 DOM 事件处理程序设置为：
<button onClick={{ignore-children (action "handleClick" target=element)}}>Click me</button>在这里，element 是目标元素，ignore-children 帮助程序包装了 {{action}} 辅助函数，以便在处理事件时忽略目标元素之前的所有祖先元素。 这样，只有当用户单击目标元素时，我们在控制器/组件中处理点击事件。
在控制器/组件中，我们可以为 handleClick 方法传递目标元素作为参数：
handleClick(element) {
// Do something with the target element
console.log(element);
}这样，当用户单击 "Click me" 按钮时，handleClick 方法将会打印按钮的 DOM 元素。
示例代码
-- -------------------- ---- -------
-- -------------------------
------ ---------- ---- --------------------
------ ------- -------------------
-------- -
-------------------- -
-- -- --------- ---- --- ------ -------
---------------------
-
-
---{{! templates/application.hbs }}
<button onClick={{ignore-children (action "handleClick" target=element)}}>Click me</button>在此示例中，我们定义了一个名为 handleClick 的方法，以便在单击按钮时在控制器中处理相应的事件。 我们使用 {{ignore-children}} 帮助程序来忽略目标元素之前的所有祖先元素，从而仅在单击按钮时处理单击事件。
结论
通过使用 ember-ignore-children-helper，我们可以轻松地从目标元素之前的所有祖先元素中解析正确的元素。 希望这篇教程可以帮助你在你的 Ember.js 应用程序中更好地处理事件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60076