Question

这里非常简单的场景，我希望有一个简单的解决方案...... 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）上，显示用户详细信息。在DELETE图标的click事件中，我想显示一个弹出窗口。

我已经编写并使用了这两种方法。 我的问题是点击删除图标，它也会触发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>

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

Answer 3

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

如果你想让泡泡具有动态逻辑，但你可以从点击处理程序中分离

https://jsfiddle.net/h1mrfLe6/

分层淘汰赛点击装订

3 个答案: