单击div内的按钮单击无效工作

Question

我在div中有一个按钮点击事件,它也有一个点击事件.如果用户单击该按钮,则只有insideClick应该执行而不是outsideClick.有人可以分享一些见解吗？

https://jsfiddle.net/s4om9y1y/

<input type="text" data-bind="value: goal" />
<div data-bind="click: outsideClick">
  Outside click.

  <button data-bind="click: insideClick">
    Inside click.
  </button>
</div>



function AppViewModel() {
  var self = this;
  self.goal = ko.observable(3);

  self.outsideClick = function() {
    alert('outside click');
  };
  self.insideClick = function() {
    alert('inside click');
  };

}

var vm = new AppViewModel();

ko.applyBindings(vm);

Answer 1

您需要将clickBubble带有参数的绑定添加false到内部绑定:

<button data-bind="click: insideClick, clickBubble: false">
  Inside click.
</button>

从文档:

默认情况下,Knockout将允许click事件继续冒泡到任何更高级别的事件处理程序.例如,如果您的元素和该元素的父元素都处理click事件,则将触发两个元素的单击处理程序.如有必要,您可以通过包含名为clickBubble的附加绑定并将false传递给它来阻止事件冒泡,...:

演示JSFiddle.