Click and Hold event listener with Javascript [closed]

Question

I want to make a page with Click and Hold event effect, like http://andeinerseite.video/ or http://2016.makemepulse.com/, I'm interested in what framework uses to create those effects.

Vibration

Not sure if it's an actual framework or something they did themselves, but I'm guessing that the underlying thing is just start doing stuff at the mousedown event and then stop it at mouseup. – Overlap

a good question with 7 upvoting on an accepted answer but has only 1 upvote on the question? What happens? – Euchologion

@novonimo This isn't a very good question, it just happened to become a canonical result due to traffic from search engines (22k views at time of writing) and the luck of someone writing a good answer and providing working code that solves a common problem. Currently, there are 5 upvotes on the question and 3 downvotes. – Abbyabbye

thanks a lot for your useful information about this topic @Abbyabbye – Euchologion

Answer 1

You can use Javascript's setTimeout function and bind it to mousedown events. Have a look at the snippet below:

// click and hold event listener

var timeout_id = 0,
    hold_time = 1000,
    hold_menu = $('.hold_menu'),
    hold_trigger = $('.hold_trigger');

hold_menu.hide();

hold_trigger.mousedown(function() {
    timeout_id = setTimeout(menu_toggle, hold_time);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeout_id);
});

function menu_toggle() {
  hold_menu.toggle();
}

ul.hold_menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.hold_menu a, div.hold_trigger  {
   display: inline-block;
   padding: 5px 15px;
   border: 1px solid #ccc;
   width: 300px;
}

ul.hold_menu a:link, ul.hold_menu a:visited {
   color: black;
   text-decoration: none;
}

ul.hold_menu a:active, ul.hold_menu a:hover {
   background: #ff0;
   text-decoration: none;
}

div.hold_trigger {
   color: black;
   cursor: pointer;
}

div.hold_trigger:hover {
   background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hold_trigger">Click and hold to toggle the menu</div>
<ul class="hold_menu">
   <li><a href="#">Option 1</a></li>
   <li><a href="#">Option 2</a></li>
   <li><a href="#">Option 3</a></li>
</ul>

Hope this helps!

Incinerate

Answer 2

With plain javascript you can do something like this:

selector.addEventListener('mousedown', function(event) { 
  // simulating hold event
  setTimeout(function() {
    // You are now in a hold state, you can do whatever you like!
  }, 500);
});

You can tweak the 500ms value to any timespan fits your needs.

Clinker

This adds a delay to respond to a mousedown, but if the mousedown is followed by a mouseup shortly thereafter (i.e. a short click), then it's not true that you're in a hold state 500 ms later. You'll need to clear the timeout if the mouseup event fires too soon as shown here. – Abbyabbye