JSFiddle - React, Tailwind, and code Playground

by Hoang Hoi

HTML

<button id="btn">click, double click, right click me</button>
<br/>
<button id="clr">clear</button>
<br/>
<textarea id="ttr" col=10></textarea>

CSS

#ttr {
    height: 300px;
    width: 300px;
}

JavaScript

document.getElementById('btn').addEventListener('click', click, true);
document.getElementById('btn').addEventListener('dblclick', dblclick, true);
document.getElementById('btn').addEventListener('contextmenu', contextmenu, true);
document.getElementById('btn').addEventListener('mousedown', mousedown, true);
document.getElementById('btn').addEventListener('mouseup', mouseup, true);

function click(event) {
  var data = document.getElementById('ttr').value;
  data += '\n' + 'click ---- button:' + event.which;
  document.getElementById('ttr').value = data;
  event.preventDefault();
}

function dblclick(event) {
  var data = document.getElementById('ttr').value;
  data += '\n' + 'dblclick ---- button:' + event.which;
  document.getElementById('ttr').value = data;
	event.preventDefault();
}

function contextmenu(event) {
  var data = document.getElementById('ttr').value;
  data += '\n' + 'contextmenu ---- button:' + event.which;
  document.getElementById('ttr').value = data;
	event.preventDefault();
}

function mousedown(event) {
  var data = document.getElementById('ttr').value;
  data += '\n' + 'mousedown ---- button:' + event.which;
  document.getElementById('ttr').value = data;
  event.preventDefault();
}

function mouseup(event) {
  var data = document.getElementById('ttr').value;
  data += '\n' + 'mouseup ---- button:' + event.which;
  document.getElementById('ttr').value = data;
  event.preventDefault();
}