Hold event?

Question

JavaScript

How to use hammer.js (well, or in other ways) to make an event that will add a class to the element if there is a hold (like 3d touch) ? Can you give examples?

Answer 1

I don’t know about hummer.js , but in general, like this:

function hold(e, f, t, g){
   var holder;
   e.addEventListener("mousedown", function(r){
         holder = setTimeout(function(){
               f.call(e, r);
               holder = true;
         }, t || 2000)
   });
   document.addEventListener("mouseup", function(r){
          holder === true ? g && g.call(e, r) 
            : clearTimeout(holder);
   });
}

hold(
  document.body,  //Целевой элемент
  function(){  //Функция, выполняющаяся при удержании (единожды)
    this.classList.add("active");  
  }, 
  3000,  //Время, через которое сработает «Удержание»
  function(){  //Функция, которая сработает после удержания
     this.classList.remove("active");
  }
);

Usage example