JSFiddle - React, Tailwind, and code Playground
HTML
<div id="foo"></div>
CSS
#foo {width:100px;height:100px;background:#CCC;border:solid 1px #000}
JavaScript
$('#foo').mousedown(function(){
$(this).data('lastPressed', new Date().getTime());
}).mouseup(function(){
var lastPressed = $(this).data('lastPressed');
if (lastPressed){
var duration = new Date().getTime() - lastPressed;
$(this).data('lastPressed', false);
if (duration > 2000) {
alert('Your click lasted more than 2 seconds.');
} else {
alert('Your click lasted less than 2 seconds.');
}
}
}).mouseout(function(){
$(this).data('lastPressed', false);
});