冒泡后敲除点击绑定

Question

有没有办法在事件冒泡后运行点击？在下面的场景中，单击 span 会触发 removeChildNode 函数，该函数会从 dom 中删除 span。这可以防止 span 的点击触发对 'div[data-identifier]' 节点的点击。我希望事件冒泡然后执行函数。

<div data-identifier> <div data-bind="click: removeChildNode"> <span>Click Me!</span> </div> </div> removeChildNode = function() { $(arguments[1].target).children()[0].remove(); } $('body').on("click", 'span', function(event) { // use the span to navigate around and do something interesting $(event.target).closest('div[data-identifier]').click(); });

Answer 1

如果您要使用 Knockout，则需要让它控制 DOM，并操纵您的视图模型。您应该有一些表示可移动子项的视图模型实体，并且您的 removeChildNode 函数会将其删除（或将其设置为指示已删除的状态）。作为一般规则，jQuery 个选择器表示您没有建模某些东西。

有两种方法来设置点击事件是没有意义的。如果您要在一个地方使用 jQuery 点击事件，您应该对所有点击事件使用 jQuery 而不是使用 Knockout。

也就是说，默认情况下，Knockout 确实允许事件冒泡。您可以在节点移除器周围放置一个 setTimeout，以便在移除节点之前给 DOM 时间来传播事件，如果这是阻止外部点击的原因。如果将 DOM 完全留给 Knockout，此类问题将会减少。

Answer 2

你应该像这样包装你的点击绑定

data-bind="click: function(){setTimeout(removeChildNode(),20);return true;}"

通过设置超时，您将延迟 removeChildNode 的执行。

通过将您的调用包装到一个函数中，您可以 return 立即为真，我认为这会告诉 koJs 冒泡事件。所以你实现了冒泡，延迟一段时间后执行removeChild。

我没有在 fiddle 上试过这个，但我认为它应该有用，如果你试过让我知道它是怎么回事，也许我应该在回答之前确定我的答案是可靠的，但我我认为我在这一点上是正确的:)

冒泡后敲除点击绑定

Knockout click binding after bubbling

knockout.js

event-bubbling