JSFiddle - React, Tailwind, and code Playground

JavaScript

var
      d=document,
     ce=function(e,n){var a=document.createEvent("CustomEvent");a.initCustomEvent(n,true,true,e.target);e.target.dispatchEvent(a);a=null;return false},
     //m=(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)?'touch':'mouse'),
     nm=true,
     bd=false,
     sp={x:0,y:0},
     ep={x:0,y:0},
     f={
      touch:{
       touchstart:function(e){ce(e,'sfc');sp={x:e.touches[0].pageX,y:e.touches[0].pageY}},
       touchmove:function(e){nm=false;ep={x:e.touches[0].pageX,y:e.touches[0].pageY}},
       touchend:function(e){
        if(nm){
         ce(e,'fc');
        }else{
         var x=ep.x-sp.x,xr=Math.abs(x),y=ep.y-sp.y,yr=Math.abs(y);
         if(Math.max(xr,yr)>20){ce(e,(xr>yr?(x<0?'swl':'swr'):(y<0?'swu':'swd')));};
        };
        nm=true;
       },
       touchcancel:function(e){nm=false;}  
      },
      mouse:{
       mousedown:function(e){if(e.button===0){ce(e,'sfc');bd=true;nm=true;sp={x:e.x,y:e.y}}},
       mousemove:function(e){if(bd){nm=false;ep={x:e.x,y:e.y}}},
       mouseup:function(e){
    	if(e.button===0){
    	 bd=false;
         if(nm){
          ce(e,'fc');
         }else{
    	  var x=ep.x-sp.x,xr=Math.abs(x),y=ep.y-sp.y,yr=Math.abs(y);
          if(Math.max(xr,yr)>20){
    	   ce(e,(xr>yr?(x<0?'swl':'swr'):(y<0?'swu':'swd')));
    	  }else{
    	   ce(e,'fc')
    	  };
    	 };
         nm=true;  
    	}
       }
      }
     };
for(var a in f['mouse']){d.addEventListener(a,f['mouse'][a],false);}
for(var a in f['touch']){d.addEventListener(a,f['touch'][a],false);}
    

var h=function(e){console.log(e.type);};
document.addEventListener('fc',h,false);
//document.addEventListener('sfc',h,false); SUPERFASTCLICK
document.addEventListener('swl',h,false);
document.addEventListener('swr',h,false);
document.addEventListener('swu',h,false);
document.addEventListener('swd',h,false);