JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<div class="test">
  <button>
  Test me
  </button>
</div>
<div id="touch-area">
</div>

CSS

.test {
  min-height: 100vh;
}
#touch-area {
  position:fixed;
  background-color: rgba(255,0,0,.35);
  top: 0; 
  display: block;
  min-height: 100vh;
  width: 100%;
}
body {margin: 0;}

JavaScript

let touchArea = document.getElementById('touch-area');
touchArea.onclick = function(e){
  touchArea.style.display = 'none';
  document.elementFromPoint(e.clientX, e.clientY).click();
  touchArea.style.display = 'block';
  return false;
}
document.querySelector('button').onclick = function(e){
	console.log('you clicked the button :)');
}