Quantcast
Channel: WebOmnizz
Viewing all articles
Browse latest Browse all 13

Click and Hold event listener with JQuery

0
0

I have did some experiment with click event. I need to hold the click for a specific amount of time and when user release the mouse that time my defined event will trigger with it. And i have achieved that and now want to share it with you. I have also implemented the touchstart and touchend event into it and tested in chrome and its working perfect. So this is simple demo for click and hold event listener.

$(document).ready(function() {
  
    var i = 0, timeOut = 0;
  
    // Hold Event 
    $('.close').on('mousedown touchstart', function(e) {
        $(this).addClass('active');
        timeOut = setInterval(function() {
              // Debug 
              console.log(i++);
        }, 100);
    }).bind('mouseup mouseleave touchend', function() {
        $(this).removeClass('active');
        clearInterval(timeOut);
    });
  
});

I have used setInterval() and clearInterval() for time delay. First we have to use mousedown event, and for release event we call to mouseup or mouseleave or both event with the same element. I have bind these event with .on() event handler.  Here is the demo of the above code:

Click and Hold Event Demo

See the Pen Click and Hold event listener with JQuery by Jogesh Sharma (@webomnizz) on CodePen.

The post Click and Hold event listener with JQuery appeared first on WebOmnizz.


Viewing all articles
Browse latest Browse all 13

Latest Images

Trending Articles





Latest Images