JSFiddle - React, Tailwind, and code Playground

by Hakan Bilgin

HTML

<a class="nolink" href="/custom-link/">This is a link</a> - click event for this link will be handled by Javascript.

JavaScript

$(function() {
'use strict';

var app = {
	init: function() {
		this.root   = $(window);
		this.body   = $('body');
		
		// init sub-objects
		for (var name in this) {
			if (typeof(this[name].init) === 'function') {
				this[name].init();
			}
		}
		// bind event handlers
		this.body.on('click', '.nolink, [data-cmd]', this.doEvent);
	},
	doEvent: function(event, el) {
		var self = app,
			cmd  = (typeof(event) === 'string')? event : event.type,
			scrollTop,
			total,
			srcEl,
			top,
			dir;
		//console.log( cmd );
		switch(cmd) {
			// native events
			case 'click':
				srcEl = event.target;
				if (srcEl.nodeName.toLowerCase() === 'input') return;
				event.preventDefault();

				srcEl = (this.nodeName === 'A')? this : srcEl;
				cmd = this.getAttribute('href') || this.getAttribute('data-cmd');
				return self.doEvent(cmd, $(this), event);
			// custom events
			case '/custom-link/':
                console.log( el );
				break;
		}
	},
    forms: {
        init: function() {
            console.log('this is a sub object');   
        }
    }
};

window.app = app;
app.init();

});