Something you could do is use delayed checks using setTimeout during various mouse events. Enabling jQuery $.data() to store a timeout between events (for each element) should help you do all this. Here is an example:
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>
JS:
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 }); });
DEMO : http://jsfiddle.net/7jKYa/10/
There is a lot more to do with this, since you also turn on the hang, but for the most part I think it does what you want.
It can be easily converted to a plugin if necessary, otherwise I think that it can work alone. Hope this helps!