JSFiddle - React, Tailwind, and code Playground

by Neeraj

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-debug.js"></script>
<input type="button" data-bind="singleClick: clicked, event : { dblclick: double }" value=" Click Me "></input>

<br/>
<div>Clicks  <span data-bind="text: clicks"></span></div>
<div>Doubles <span data-bind="text: doubles"></span></div>

CSS

li { padding: 5px; background-color: #CCC; margin-bottom: 5px; }

JavaScript

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

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


var viewModel = function() {
    var self = this;
    this.clicks = ko.observable(0);
    this.doubles = ko.observable(0);
    

    this.clicked = function () {
        self.clicks(self.clicks() + 1);
    };
    
    this.double = function () {
        self.doubles(self.doubles() + 1);
    };
};
ko.applyBindings(new viewModel());