点击事件触发多次，并保持输入键

Question

有 knockout-3.3.0 & jquery-1.11.2 & bootstrap-3 应用程序。

带有click绑定的模板：

<div class="modal-footer">
    <button type="button" class="btn btn-primary" data-bind="click: $parent.Submit, text: 'Submit'"></button>
</div>

视图模型包含处理程序：

self.Submit = function (data, event) {
    console.log('fired');
    /* do some very important staff */
};

如果我点击了 提交 按钮，那么事件会触发一次。 但是，如果我按住 Enter 键 并单击 Submit 按钮并按住 Enter 键，则该事件会触发 10 到 20 次。

有一个选项可以像这样修改处理程序：

self.isSubmitting = ko.observable(false);
self.Submit = function (data, event) {
    if (self.isSubmitting()) {
        return;
    }

    console.log('fired');
    self.isSubmitting(true);

    /* do some very important staff */

    self.isSubmitting(false);
};

但我更喜欢一些更通用的解决方案，而不是修改应用程序中的每个 click 处理程序。

那么，你怎么看？提前谢谢！

编辑： 问题出在按钮被点击后的焦点上。修改事件绑定不是选项，因为这种行为是正确的。这就是为什么解决方案是使用 isSubmitting 布尔变量修改处理程序以避免不必要的执行。

Answer 1

不确定这是否适用于您的 UX 设计，但我认为您可以使用 mouseup 事件来解决这个问题？

编辑 您也希望对触摸设备执行此操作，因此您需要绑定到 2 个事件“mouseup”和“touchend”，不确定淘汰赛中的语法，所以我做了我认为正确的事情下面，可能是一个淘汰赛错误。

<div class="modal-footer">
    <button type="button" class="btn btn-primary" data-bind="mouseup: $parent.Submit, text: 'Submit', touchend: $parent.Submit"></button>
</div>

否则，您可以应用油门/去抖动。为了便于参考，请查看有关节流阀使用的 lodash 文档：

https://lodash.com/docs/4.17.10#throttle

我并不是说导入 lodash 纯粹是为了他们的节流（它就像 70kb un gzipped），但这应该会给你这个想法（用法）。

var waittime = 1000;
self.Submit = _.throttle(function (data, event) {
    console.log('fired');
    /* do some very important staff */
}, waittime);

我不认为这会有所帮助，因为一旦等待时间过去，它仍然会执行，假设用户仍然将手指/手放在输入按钮上。