冒泡后敲除点击绑定
Knockout click binding after bubbling
有没有办法在事件冒泡后运行点击?在下面的场景中,单击 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();
});
如果您要使用 Knockout,则需要让它控制 DOM,并操纵您的视图模型。您应该有一些表示可移动子项的视图模型实体,并且您的 removeChildNode
函数会将其删除(或将其设置为指示已删除的状态)。作为一般规则,jQuery 个选择器表示您没有建模某些东西。
有两种方法来设置点击事件是没有意义的。如果您要在一个地方使用 jQuery 点击事件,您应该对所有点击事件使用 jQuery 而不是使用 Knockout。
也就是说,默认情况下,Knockout 确实允许事件冒泡。您可以在节点移除器周围放置一个 setTimeout
,以便在移除节点之前给 DOM 时间来传播事件,如果这是阻止外部点击的原因。如果将 DOM 完全留给 Knockout,此类问题将会减少。
你应该像这样包装你的点击绑定
data-bind="click: function(){setTimeout(removeChildNode(),20);return true;}"
通过设置超时,您将延迟 removeChildNode 的执行。
通过将您的调用包装到一个函数中,您可以 return 立即为真,我认为这会告诉 koJs 冒泡事件。所以你实现了冒泡,延迟一段时间后执行removeChild。
我没有在 fiddle 上试过这个,但我认为它应该有用,如果你试过让我知道它是怎么回事,也许我应该在回答之前确定我的答案是可靠的,但我我认为我在这一点上是正确的:)
有没有办法在事件冒泡后运行点击?在下面的场景中,单击 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();
});
如果您要使用 Knockout,则需要让它控制 DOM,并操纵您的视图模型。您应该有一些表示可移动子项的视图模型实体,并且您的 removeChildNode
函数会将其删除(或将其设置为指示已删除的状态)。作为一般规则,jQuery 个选择器表示您没有建模某些东西。
有两种方法来设置点击事件是没有意义的。如果您要在一个地方使用 jQuery 点击事件,您应该对所有点击事件使用 jQuery 而不是使用 Knockout。
也就是说,默认情况下,Knockout 确实允许事件冒泡。您可以在节点移除器周围放置一个 setTimeout
,以便在移除节点之前给 DOM 时间来传播事件,如果这是阻止外部点击的原因。如果将 DOM 完全留给 Knockout,此类问题将会减少。
你应该像这样包装你的点击绑定
data-bind="click: function(){setTimeout(removeChildNode(),20);return true;}"
通过设置超时,您将延迟 removeChildNode 的执行。
通过将您的调用包装到一个函数中,您可以 return 立即为真,我认为这会告诉 koJs 冒泡事件。所以你实现了冒泡,延迟一段时间后执行removeChild。
我没有在 fiddle 上试过这个,但我认为它应该有用,如果你试过让我知道它是怎么回事,也许我应该在回答之前确定我的答案是可靠的,但我我认为我在这一点上是正确的:)