How can I listen for a click-and-hold in jQuery

Question

I want to be able to fire an event when a user clicks on a button  then holds that click down for 1000 to 1500 ms    Is there jQuery core functionality or a plugin that already enables this   Should I roll my own  Where should I start

User · Accepted Answer

var timeoutId   0       myElement   on  mousedown   function         timeoutId   setTimeout myFunction  1000      on  mouseup mouseleave   function         clearTimeout timeoutId         Edit  correction per AndyE   thanks   Edit 2  using bind now for two events with same handler per gnarf

User · Answer

Here s my current implementation     liveClickHold   function selector  fn           selector  live  mousedown   function evt             var  this     this  data  mousedown   true            setTimeout function                 if   this data  mousedown       true                    fn evt                            500                   selector  live  mouseup   function evt              this  data  mousedown   false

User · Answer

Aircoded  but tested on this fiddle    function          function startTrigger e            var  elem     this            elem data  mouseheld timeout   setTimeout function                  elem trigger  mouseheld               e data               function stopTrigger             var  elem     this           clearTimeout  elem data  mouseheld timeout                 var mouseheld     event special mouseheld             setup  function data                   the first binding of a mouseheld event on an element will trigger this                lets bind our event handlers             var  this     this                this bind  mousedown    data    mouseheld time  startTrigger                this bind  mouseleave mouseup   stopTrigger                      teardown  function                 var  this     this                this unbind  mousedown   startTrigger                this unbind  mouseleave mouseup   stopTrigger                      time  750    default to 750ms           jQuery       usage    div   bind  mouseheld   function e        console log  Held   e

User · Answer

Presumably you could kick off a setTimeout call in mousedown  and then cancel it in mouseup  if mouseup happens before your timeout completes    However  looks like there is a plugin  longclick

User · Answer

I made a simple JQuery plugin for this if anyone is interested   http   plugins jquery com pressAndHold

User · Answer

var  timeoutId   0       var  startHoldEvent   function e           timeoutId   setInterval function              myFunction call e target            1000               var  stopHoldEvent   function           clearInterval  timeoutId                    myElement   on  mousedown    startHoldEvent  on  mouseup mouseleave    stopHoldEvent

User · Answer

Try this   var thumbnailHold           image thumb   mousedown function             thumbnailHold   setTimeout function                 checkboxOn       Your action Here               1000        return false           image thumb   mouseup function         clearTimeout thumbnailHold

User · Answer

I wrote some code to make it easy   x000D   x000D    Add custom event listener x000D      root   on  mousedown        function     x000D      var el     this   x000D          events      data this   events    x000D      if  events  amp  amp  events clickHold    x000D          el data  x000D               clickHoldTimer   x000D              setTimeout  x000D                  function     x000D                      el trigger  clickHold   x000D                     x000D                  el data  clickHoldTimeout   x000D                x000D             x000D        x000D     on  mouseup mouseleave mousemove        function     x000D      clearTimeout   this  data  clickHoldTimer     x000D      x000D   x000D    Attach it to the element x000D      HoldListener   data  clickHoldTimeout   2000     Time to hold x000D      HoldListener   on  clickHold   function     x000D      console log  Worked     x000D      x000D   lt script src  https   code jquery com jquery-3 2 1 min js  gt  lt  script gt  x000D   lt img src  http   lorempixel com 400 200   id  HoldListener  gt  x000D   x000D   x000D    See on JSFiddle  Now you need just to set the time of holding and add clickHold event on your element

[javascript] How can I listen for a click-and-hold in jQuery?

Examples related to javascript

Examples related to jquery

Examples related to events