Question

有淘汰赛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>

viewmodel包含处理程序：

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

如果我点击提交按钮，则事件触发一次。但是，如果我按住 Enter键并在按住 Enter键的情况下单击 Submit 按钮，则事件触发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事件解决此问题？

修改您还将需要对触摸设备执行此操作，因此您将需要绑定到两个事件“ 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一样），但这应该可以给你一个主意（用法）。

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

我认为这不会有帮助，因为假设用户仍然将手指放在输入按钮上，它会在等待时间结束后仍然执行。

在按住Enter键的情况下，多次触发Click事件

1 个答案: