JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainLayer">
       <canvas id="c" width="500" height="50"></canvas>
  </div>
<div id="overlayLayer" style="display:none">
	    <ul>
			<li>
			    <a onmousedown="javascript:itemClicked();">
			    <span class="linklist aanklik">
				
			    <span class="name">This item will be selected on touch event</span>
			    </span>
			    </a>
			</li>
       </ul>
  </div>

CSS

#overlayLayer, #mainLayer {
   position: absolute;
   background: #fff;
   width: 100%;
}

ul > li {
	list-style: none;
	display: block;
	width: 100%;
	border-left:0;
	border-bottom: 1px solid #ccc;
    height: 40px;
    text-align: center;
    
}

ul, span {
	margin: 0;
	padding: 0;
	display: block;
    height: 100%;
}

a {
	text-decoration: none;
    color: #000;
}

JavaScript

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({  width: 300,  height: 50, top: 25,  left: 300,  fill: '#ff0000' });
canvas.add(rect);

canvas.on({
  'object:selected' : displayList,
});



function displayList() {
     document.getElementById("overlayLayer").style.display = "";   
}

function itemClicked() {
    alert("Did you Click / Touch?");
}