JSFiddle - React, Tailwind, and code Playground

by JasonMore

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div data-bind="text: TotalClicks"></div>
<button data-bind="event: { touchend: DoStuff, click: DoStuff }">Click Me</button>
<div data-bind="event: { touchend: DoStuff, click: DoStuff }">Click Me</div>

<button data-bind="clickOrTouch: DoStuff">Click Me</button>

JavaScript

var mainViewModel = function () {
        var self = this;

        this.TotalClicks = ko.observable(0);

        this.DoStuff = function(){
            self.TotalClicks(self.TotalClicks() + 1);
        }
    };

$(function () {
  myApp = new mainViewModel();
  ko.applyBindings(myApp);
});


ko.bindingHandlers.clickOrTouch = {
  init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    ko.bindingHandlers.event.init(element, function () {
      return {
        touchEnd: valueAccessor(),
        click: valueAccessor()
      }
    }, allBindingsAccessor, viewModel);
  }
};