JSFiddle - React, Tailwind, and code Playground

Touch tracking

by tonytlwu

HTML

<span id="dot"></span>
<pre id="debug"></pre>

CSS

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}
span {
  width: 2px;
  height: 2px;
  background: green;
  display: block;
  overflow: visible;
}
span:after {
  content: '';
  width: 200px;
  height: 200px;
  background: rgba(0,255,0,0.05);
  display: block;
  border-radius: 50%;
  -webkit-transform: translate3d(-50%,-50%,0);
  border: 1px solid rgba(0,255,0,0.1);
}
span.error {
  background: red;
}
span.error:after {
  background: rgba(255,0,0,0.05);
  border-color: rgba(255,0,0,0.1);
}
pre {
 position: absolute;
 right: 0;
 bottom: 0;
 padding: 10px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<style>

JavaScript

var debug = document.getElementById('debug');
var dot = document.getElementById('dot');
var start = {
	x: 0,
  y: 0
};
var threshold = 15;

var xKey = 'pageX';
var yKey = 'pageY';

var logTouch = function(e) {
	debug.innerHTML = e[xKey] + ', ' + e[yKey];
  dot.style.webkitTransform = 'translate3d('+e[xKey]+'px,'+e[yKey]+'px,0)';
  if (Math.abs(e[xKey] - start.x) > threshold || Math.abs(e[yKey] - start.y) > threshold) {
  	dot.classList.add('error');
  } else {
    dot.classList.remove('error');
  }
}
document.addEventListener('touchstart',function(e){
	start.x = e[xKey];
  start.y = e[yKey];
  logTouch(e);
},false);
document.addEventListener('touchmove',logTouch,false);