jQuery mouseup and mousedown

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("div").mouseup(function(){
    $(this).after("<p style='color:green;'>Mouse button released.</p>");
  });
  $("div").mousedown(function(){
    $(this).after("<p style='color:purple;'>Mouse button pressed down.</p>");
  });
});
</script>

How to use this for a website in an useful way? I mean is good this example write the messages what happened about click. But in main simple idea how can use this? More than just with text? Any functionality more than this? like .blur? I mean to use it for?

Thanks

You might want to find difference between mousedown and mouseup timings to check for any click and hold or drag gestures performed by user.