JSFiddle - React, Tailwind, and code Playground

HTML

<p><button class="target">Target</button></p>

<p>Last event: <span class="status"></span><p>
    
<p>Click can <span class="can-click"></span>happen.<p>
    
    <p class="click-or-no"></p>

JavaScript

//this flag is checked against to see if the "click" function can happen
var clickIsValid = true;

//this is how many milliseconds you want to allow before click doesn't count
var delay = 500;

//this function sets the flag to false
var dontClick = function(){
 clickIsValid = false;
 $('.can-click').text(' not ');
}

//mousedown, a global variable is set to the timeout function
$('.target').mousedown( function(){
    $('.status').text('Mouse down');
    cancelClick = setTimeout( dontClick, delay );
})

//mouseup, the timeout for dontClick is cancelled
$('.target').mouseup( function(){
    $('.status').text('Mouse up');
    clearTimeout( cancelClick );
   
    //if the time limit wasn't passed, this will be true
    if(clickIsValid){
        // this is where you call the function you want to happen on  a quick click
        $('.click-or-no').text('Let\'s call that a click!');
    }else{
        $('.click-or-no').text('Let\'s not call that a click...');
    }
    //reset the values to their defaults
     clickIsValid = true;
    $('.can-click').text(' ');
})