單擊事件多次觸發並按住 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);

我認為這不會有幫助，因為一旦等待時間過去，它仍然會執行，假設用戶的手指/手仍然放在輸入按鈕上。