Help with implementing a click and hold function

Help with implementing a click and hold function

Hello all,

I have a grid of items that when clicked lead to a new page. I would like to implement a function so that if a user clicks on an item and holds for at least 1000ms, a menu will be shown next to the item and they will not be taken to the next page.

However, all of my current attempts either lead to the menu not being shown, or it is shown and the user is redirected to the next page anyways.

Here's my current code:

  1. jQuery(document).ready(function(){
  2. var mousehold;
  3. jQuery('.item').mousedown(function(){
  4. var selected = jQuery(this);
  5. var show_menu = function() {
  6. // show menu for selected
  7. }
  8. mousehold = setTimeout(show_menu,1000);
  9. }).mouseup(function() {
  10. clearTimeout(mousehold);
  11. });
  12. });
Any suggestions?

Cory