单击事件多次触发并按住 Enter 键

Question

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

带有点击绑定的模板：

<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);
};

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

所以你怎么看？ 先感谢您！

编辑：单击按钮后问题出在按钮上。 修改事件绑定不是选项，因为这种行为是正确的。 这就是为什么解决方案是使用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 gzip 压缩），但这应该给你一个想法（用法）。

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

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