javascript - 分层镂空按扣装订

Question

这里的场景非常简单，我希望有一个简单的解决方案......Jquery 可以处理这个问题，但为了提高效率，我想使用 knockout 点击绑定(bind)。

<ul>
    <li data-bind="click: ShowMyUser">
        <span>My Email Address Or Username</span>
        <i data-bind="click: DeleteMyUser">Delete Icon</i>
    </li>
<ul>

在此示例中，我有一个用户名或电子邮件地址列表。我想做的是在 ROW(例如 li)的点击事件上显示用户详细信息。在“删除”图标的单击事件上，我想显示一个弹出窗口。

我已经编写并运行了这两种方法。 我的问题是，单击删除图标时，它还会触发 li 事件。

为了解决这个问题，我实现了以下措施:

<ul>
    <li>
        <span data-bind="click: ShowMyUser">My Email Address Or Username</span>
        <i data-bind="click: DeleteMyUser">Delete Icon</i>
    </li>
<ul>

但这意味着用户必须点击文本，我不太喜欢这一点，我认为这不直观。

小伙伴们有什么想法吗？

Answer 1

KnockoutJS已经支持停止冒泡，无需从头开始编写:http://knockoutjs.com/documentation/click-binding.html (参见注4)

只需将 clickBubble: false 添加到子点击即可。

<ul>
  <li data-bind="click: ShowMyUser">
    <span>My Email Address Or Username</span>
    <i data-bind="click: DeleteMyUser, clickBubble: false">Delete Icon</i>
  </li>
<ul>