JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div>
  <button>Btn 1</button>
  <input type="button" value="Btn 2">
  <input type="submit" value="Btn 3" onclick="document.querySelector('pre').innerHTML=+new Date">
  <section unselectable="on" class="button">Btn 4</section>
</div>
<div>
  <pre>0</pre>
</div>

CSS

div {
  margin: 10px;
}

.button {
  display: inline;
  font: 0.9em sans-serif;
  cursor: default;
  user-select: none;
  border: 1px solid #999;
  padding: 2px 4px;
  text-align: center;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
  background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}

.button:hover {
   border: 1px solid #666; 
}

.button:active,
.button:checked {
  background: #e5e5e5;
  background: -moz-linear-gradient(top,  #e5e5e5 0%, #ffffff 100%);
  background: -webkit-linear-gradient(top,  #e5e5e5 0%,#ffffff 100%);
  background: linear-gradient(to bottom,  #e5e5e5 0%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
}

[unselectable=on] {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

JavaScript

console.clear();

//__________________________________________________

if (1){
  document.addEventListener('mousedown', function(e){
      if (!e.target._click) return;
      console.log('♼ Call Mousedown Event Listener');
      return e.target._click.call(e.target, e);
  });

	Element.prototype.on = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a, f, b) {
    if (a == 'click'){
    	console.log('✜ Set Event Listener for Click'); 
    	return this._click = f;
		}
    return this.on(a, f, b);
  };
}

//__________________________________________________

var $btn1 = document.querySelector('button');
var $pre = document.querySelector('pre');
var i=0;

$btn1.addEventListener('click', function(){
	console.log('♳ Call Original Event Listener'); 
	$pre.innerHTML = +new Date;
  $pre.style.color = '#000';
}, true);

document.querySelector('input[type=button]').addEventListener('click', function(e){
	console.log('♳ Call Original Event Listener'); 
	$pre.innerHTML = +new Date;
  //$pre.style.color = '#'+((1<<24)*Math.random()|0).toString(16);
  $pre.style.color = '#'+(++i%2?'f00':'00f');
  //console.log(e.target);
});

document.querySelector('section').addEventListener('dblclick', function(e){
	$pre.innerHTML = +new Date;
  $pre.style.color = '#'+((1<<24)*Math.random()|0).toString(16);
});