knockout bind doubleclick and singleclick, ignore singleclick if double click

Question

I have a click event bound to the following ko function:

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

It is bound like so:

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

This currently works except that it fires "select" twice when you double click, which I do not want. I tried following the advice in this SO question, but when I create the singleClick() function, I get an error that "ctrlKey is not a function of undefined". So it's not passing the event properly. Further more, the doubleClick() function in the other answer there doesn't work at all. It gives an error on the "handler.call" part saying handler is not defined.

So, how can I successfully call my ko select function on singleClick but NOT on doubleclick?

score 1 · Answer 1 · answered Dec 02 '13 at 21:06

I don't think this is really a knockout issue. You have at least these two options: 1. Implement some custom logic that prevents processing if a single click has started processing already 2. Prevent the double-click function altogether. JQuery has this handy handler:

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

score 0 · Answer 2 · answered Dec 02 '13 at 22:57

So I technically got it to work. Here is my new singleClick function

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

This passes the viewModel and event to the handler so I can still modify observables and capture ctrlKey pressed.

The binding:

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

The problem is that now, obviously, single clicking an item has a delay while it waits to see if it's a double click. This is an inherent and unsolvable issue, I believe, so though this technically answers my question, I will consider a completely different route (ie, no double-clicking at all in my interface)

knockout bind doubleclick and singleclick, ignore singleclick if double click

2 Answers2