JSFiddle - React, Tailwind, and code Playground

by Clint

HTML

<h1>
  Pointer events
</h1>
<p>
  Move your pointer over the box.
</p>
<div id="target">
  This is an element
</div>
<div id="eventLog">

</div>

CSS

#eventLog {
  overflow-y:scroll;
  height: 300px;
  background-color: white;
}

#target {
  user-select: none;
  padding: 1rem;
  background-color: silver;
  font-size: 2rem;
  height: 6rem;
  width: 10rem;
  display: inline-block;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.key {
  width: 1rem;
  height: 1rem;
  border: 1px solid black;
  background-color: white;
}

JavaScript

function message(m) {
  document.getElementById('eventLog').insertAdjacentHTML('afterBegin', m + '<br />');

}

function handle(e) {
	let r = "<span style=\"display:inline-block; width: 5em\">" + e.type + "</span> ";
  r += "<span style=\"display:inline-block; width: 4em\">" + e.pointerType + "</span> ";
  console.dir(e);
  if (e.altKey) r += '<span class="key">ALT</span> ';
  if (e.ctrlKey) r += '<span class="key">CTRL</span> ';
  if (e.metaKey) r+= '<span class="key">META</span> ';
  if (e.shiftKey) r+= '<span class="key">SHIFT</span> ';
  r += "Client X/Y: " + e.clientX + ", " + e.clientY;
  //r += " code: " + e.code;
  
  message(r);
}

const el = document.getElementById('target');
el.addEventListener("pointerup", handle);
el.addEventListener("pointerpress", handle);
el.addEventListener("pointerdown", handle);
el.addEventListener("pointermove", handle);
el.addEventListener("pointerenter", handle);
el.addEventListener("pointerleave", handle);
el.addEventListener("pointerout", handle);