JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div class="box knockout" data-bind="css: { active: active }, 
                                     event: { dblclick: toggleActive }">KNOCKOUT</div>
<div class="box native">NATIVE</div>
<div class="box jquery">JQUERY</div>
<div class="box knockout-custom" data-bind="css: { active: active }, 
                                            dblclick: toggleActive">CUSTOM</div>

CSS

* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.box {
    cursor: pointer;
    display: inline-block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: darkblue;
    color: white;
}

.active {
    background-color: darkgreen;
}

JavaScript

/**
    ko.bindinghandler to fix double click in Chrome
*/

ko.bindingHandlers.dblclick = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        
        var dblClickSpeed = 300;
        var value = valueAccessor();
        
        if (typeof value === "function") {
            $(element).on("click", function () {
                if (element.lastClickedAt && Date.now() - element.lastClickedAt < dblClickSpeed) {
                    value.call(viewModel);
                    element.lastClickedAt = 0;
                } else {
                    element.lastClickedAt = Date.now();
                }
            });
        }
    }
};

var viewModel = {
    active: ko.observable(false),
    toggleActive: function () {
        this.active(!this.active());
    }
};
ko.applyBindings(viewModel);

var box = document.getElementsByClassName("native")[0];
box.addEventListener("dblclick", function () {
    $(box).toggleClass("active");
});

$(".jquery").on("dblclick", function () {
    $(this).toggleClass("active");
});