JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<div data-bind="singleOrDoubleClick: { click: singleClick, dblclick: doubleClick }">
Click or double click me...
</div>
JavaScript
ko.bindingHandlers.singleOrDoubleClick= {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var singleHandler = valueAccessor().click,
doubleHandler = valueAccessor().dblclick,
delay = valueAccessor().delay || 200,
clicks = 0;
$(element).click(function(event) {
clicks++;
if (clicks === 1) {
setTimeout(function() {
if( clicks === 1 ) {
// Call the single click handler - passing viewModel as this 'this' object
// you may want to pass 'this' explicitly
if (singleHandler !== undefined) {
singleHandler.call(viewModel, bindingContext.$data, event);
}
} else {
// Call the double click handler - passing viewModel as this 'this' object
// you may want to pass 'this' explicitly
if (doubleHandler !== undefined) {
doubleHandler.call(viewModel, bindingContext.$data, event);
}
}
clicks = 0;
}, delay);
}
});
}
};
var TestModel = function()
{
this.singleClick = function()
{
alert("Single click");
};
this.doubleClick = function()
{
alert("Double click");
};
}
ko.applyBindings(new TestModel());