JSFiddle - React, Tailwind, and code Playground

HTML

<div id='toDetect'>
Click or double-click me
</div>
<hr/>

<ol id='info'>

</ol>

JavaScript

function debounce(func, wait, immediate) {
    let timeout;
    return function () {
        const context = this,
            args = arguments;
        const later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

function debounceSingleClickOnly(func, timeout = 500) {
   function eventHandler (event) {
   		const { detail } = event;
      console.log(`I'm clicked ${detail} times`);
      if (detail > 1) {
         console.log('no double or multiple clicks for you '+ func.name);
         console.log('');
         return;
      }
      
		  func.apply(this, arguments);
   }
   
   return debounce(eventHandler, timeout); 
}

window.toDetect.addEventListener('click', debounceSingleClickOnly(handleSingleClick));

window.toDetect.addEventListener('dblclick', handleDoubleClick);

function handleS() {
	console.log('S func');
  console.log(this.id);
}

function handleSingleClick(event) {	
   console.log('single click');
   const divText = document.createElement('li');
   divText.appendChild(document.createTextNode('single click'));
   window.info.appendChild(divText)

   console.group();
   console.log('this element was single-clicked: ' + event.target.id);   
   console.log(this.id);  
	 console.log('');   
   console.groupEnd();
}

function handleDoubleClick(event) {
   console.log('double click');
   const divText = document.createElement('li');
   divText.appendChild(document.createTextNode('double click'));
   window.info.appendChild(divText);


	 console.group();  
   console.log('this element was double-clicked: ' + event.target.id);
   console.log(this.id);  
 	 console.log('');
   console.groupEnd();
 }