Question

我有一个点击事件绑定到以下ko函数：

    self.select = function (entity, event) {
        var ctrlPressed = false;
        if (event.ctrlKey) { ctrlPressed = true; }
        if (!ctrlPressed) {
            manager.deselectAll();
            this.selected(true);
        } else {
            this.selected() ? this.selected(false) : this.selected(true);
        }
    }

它的约束如下：

data-bind="click: select, event: { dblclick: function(){alert('test');}}"

目前这种方法有效，但双击时会激活“选择”两次，这是我不想要的。我试过跟the advice in this SO question，但是当我创建singleClick（）函数时，我得到一个错误“ctrlKey不是未定义的函数”。所以它没有正确传递事件。此外，另一个答案中的doubleClick（）函数根本不起作用。它在“handler.call”部分给出了一个错误，说没有定义处理程序。

那么，如何在singleClick上成功调用我的ko select函数，但不能在doubleclick上调用？

Answer 1

我认为这不是真正的淘汰赛问题。您至少有以下两个选项： 1.实现一些自定义逻辑，如果单击已经开始处理，则会阻止处理 2.完全防止双击功能。 JQuery有这个方便的处理程序：

$(selector).on("dblclick", function(e){
    e.preventDefault();  //cancel system double-click event
});

Answer 2

所以我在技术上得到了它的工作。这是我的新单击功能

ko.bindingHandlers.singleClick = {
    init: function (element, valueAccessor, c, viewModel) {
        var handler = valueAccessor(),
            delay = 400,
            clickTimeout = false;

        $(element).click(function (event) {
            if (clickTimeout !== false) {
                clearTimeout(clickTimeout);
                clickTimeout = false;
            } else {
                clickTimeout = setTimeout(function () {
                    clickTimeout = false;
                    handler(viewModel, event);
                }, delay);
            }
        });
    }
};

这会将viewModel和event传递给处理程序，所以我仍然可以修改observable并捕获按下的ctrlKey。

绑定：

data-bind="singleClick: select, event: { dblclick: function(){alert('test');}}"

问题是，现在，显然，单击某个项目时会等待查看是否为双击。我相信这是一个固有的，无法解决的问题，所以虽然这在技术上回答了我的问题，但我会考虑一个完全不同的路线（即在我的界面中根本没有双击）

敲击绑定doubleclick和singleclick，如果双击，忽略singleclick

2 个答案: