JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<dl>
<dt>touchstart</dt>
<dd id="touchstart"></dd>
<dt>touchend</dt>
<dd id="touchend"></dd>
<dt>touchcancel</dt>
<dd id="touchcancel"></dd>
<dt>touchmove</dt>
<dd id="touchmove"></dd>

<dt>pointerdown</dt>
<dd id="pointerdown"></dd>
<dt>pointerup</dt>
<dd id="pointerup"></dd>
<dt>pointercancel</dt>
<dd id="pointercancel"></dd>
<dt>pointermove</dt>
<dd id="pointermove"></dd>
</dl>

JavaScript

var html = document.getElementsByTagName('html')[0];

var touchstart = document.getElementById('touchstart');
var touchend = document.getElementById('touchend');
var touchcancel = document.getElementById('touchcancel');
var touchmove = document.getElementById('touchmove');

var pointerdown = document.getElementById('pointerdown');
var pointerup = document.getElementById('pointerup');
var pointercancel = document.getElementById('pointercancel');
var pointermove = document.getElementById('pointermove');


function logTouch(touch) {
	return touch.screenX + ',' + touch.screenY;
}

function logTouches(touches) {
	string = '';
  
  for(i = 0; i < touches.length; i++) {
  	string += logTouch(touches[i]) + '; '
  }
  
  return string;
}

function handleTouchEvent(e) {
	return logTouches(e.touches);	
}

function handleTouchStart(e) {
	touchstart.innerHTML = handleTouchEvent(e);
  touchend.innerHTML = '';
  touchcancel.innerHTML = '';
}

function handleTouchEnd(e) {
	touchend.innerHTML = 'ended';
}

function handleTouchCancel(e) {
	touchcancel.innerHTML = 'cancelled';
}

function handleTouchMove(e) {
	touchmove.innerHTML = handleTouchEvent(e);
}

function handlePointerEvent(e) {
	return e.logTouch(e);
}

function handlePointerDown(e) {
	pointerdown.innerHTML = handlePointerEvent(e);
  pointerup.innerHTML = '';
  pointercancel.innerHTML = '';
}

function handlePointerUp(e) {
	pointerup.innerHTML = 'up';
}

function handlePointerCancel(e) {
	pointercancel.innerHTML = 'cancelled';
}

function handlePointerMove(e) {
	pointermove.innerHTML = handlePointerEvent(e);
}


html.addEventListener('touchstart', handleTouchStart, false);
html.addEventListener('touchend', handleTouchEnd, false);
html.addEventListener('touchcancel', handleTouchCancel, false);
html.addEventListener('touchmove', handleTouchMove, false);

html.addEventListener('pointerdown', handlePointerDown, false);
html.addEventListener('pointerup', handlePointerUp, false);
html.addEventListener('pointercancel',...