JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li><a href="#" onclick="return false;" class="test"></a></li>
    <li><a href="#" onclick="return false;" class="test"></a></li>
</ul>

CSS

#menu {
    margin: 10px 0 0 10px;
    padding: 0;
    border: 0;
}

#menu li {
    float: left;
    list-style: none;
    margin: 0 2px;
}

#menu li > a {
    text-decoration: none;
    border: 1px solid #000;
    background-color: #ff0000;
    color: #fff;
    padding: 2px;
}

JavaScript

var mousepress_time = 1000;  // Maybe hardcode this value in setTimeout
var orig_message = "Click Here";  // Remove this line
var held_message = "Down";  // Remove this line

$(document).ready(function () {
    $(".test")
        .html(orig_message)  // Remove this line
        .on("mousedown", function () {
            console.log("#########mousedown");  // Remove this line
            var $this = $(this);
            $(this).data("checkdown", setTimeout(function () {
                // Add your code to run
                $this.html(held_message);  // Remove this line
            }, mousepress_time));
        }).on("mouseup", function () {
            clearTimeout($(this).data("checkdown"));
            console.log("#######mouseup");  // Remove this line
            $(this).html(orig_message);  // Remove this line
        }).on("mouseout", function () {
            clearTimeout($(this).data("checkdown"));
            console.log("#######mouseout");  // Remove this line
            $(this).html(orig_message);  // Remove this line
        });
});