分层敲除点击绑定答案

【问题标题】：Layering Knockout Click binding分层敲除点击绑定
【发布时间】：2016-02-05 20:25:21
【问题描述】：

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

<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>

然而这意味着用户必须点击文本，我不是这个的忠实粉丝，我认为它不直观。

男生和女生有什么想法吗？

【问题讨论】：

stackoverflow.com/questions/14321012/…

标签： javascript jquery knockout.js

【解决方案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>

【讨论】：

谢谢，简单多了。

【解决方案2】：

感谢Roy J 发布了非常有帮助的link，我从该页面找到了解决方案。首先，我创建了以下 bindingHandler：

ko.bindingHandlers.stopBubble = {
  init: function(element) {
    ko.utils.registerEventHandler(element, "click", function(event) {
         event.cancelBubble = true;
         if (event.stopPropagation) {
            event.stopPropagation(); 
         }
    });
  }
};

然后我将它添加到我的删除图标中，这样它就不会传播并调用 li click 事件：

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

【讨论】：

【解决方案3】：

使用绑定clickBubble ~~或从DeleteMyUser点击处理程序返回false~~

如果您希望气泡具有动态逻辑但与点击处理程序分开，您可以这样做

https://jsfiddle.net/h1mrfLe6/

【讨论】：