Long Press in JavaScript

Question

Is it possible to implement  long press  in JavaScript  or jQuery   How     source  androinica com     HTML   lt a href    title    gt Long press lt  a gt    JavaScript     a   mouseup function         Clear timeout   return false     mousedown function         Set timeout   return false

User · Answer

For modern  mobile browsers   document addEventListener  contextmenu   callback     https   developer mozilla org en-US docs Web Events contextmenu

User · Answer

For cross platform developers  Note All answers given so far will not work on iOS    Mouseup down seemed to work okay on android - but not all devices ie  samsung tab4   Did not work at all on iOS   Further research its seems that this is due to the element having selection and the native magnification interupts the listener   This event listener enables a thumbnail image to be opened in a bootstrap modal  if the user holds the image for 500ms    It uses a responsive image class therefore showing a larger version of the image  This piece of code has been fully tested upon  iPad Tab4 TabA Galaxy4    var pressTimer        thumbnail   on  touchend   function  e       clearTimeout pressTimer      on  touchstart   function  e       var target     e currentTarget      var imagePath   target find  img   attr  src       var title   target find   myCaption visible   first   text           dds-modal-title   text title          dds-modal-img   attr  src   imagePath         Set timeout    pressTimer   window setTimeout function                dds-modal   modal  show          500

User · Answer

There is no  jQuery  magic  just JavaScript timers   var pressTimer      a   mouseup function      clearTimeout pressTimer        Clear timeout   return false     mousedown function         Set timeout   pressTimer   window setTimeout function         Your Code      1000     return false

User · Answer

I created long-press-event  0 5k pure JavaScript  to solve this  it adds a long-press event to the DOM   Listen for a long-press on any element      the event bubbles  so you can listen at the root level document addEventListener  long-press   function e      console log e target         Listen for a long-press on a specific element      get the element var el   document getElementById  idOfElement        add a long-press event listener el addEventListener  long-press   function e            stop the event from bubbling up     e preventDefault        console log e target         Works in IE9   Chrome  Firefox  Safari  amp  hybrid mobile apps  Cordova  amp  Ionic on iOS Android   Demo

User · Answer

document  ready function          var longpress   false          button   on  click   function               longpress    alert  Long Press     alert  Short Press                 var startTime  endTime         button   on  mousedown   function              startTime   new Date   getTime                    button   on  mouseup   function              endTime   new Date   getTime            longpress    endTime - startTime  lt  500    false   true                DEMO

User · Answer

Most elegant and clean is a jQuery plugin  https   github com untill jquery longclick   also available as packacke  https   www npmjs com package jquery longclick   In short  you use it like so       button   mayTriggerLongClicks   on   longClick   function     your code here        The advantage of this plugin is that  in contrast to some of the other answers here  click events are still possible  Note also that a long click occurs  just like a long tap on a device  before mouseup  So  that s a feature

User · Answer

You can use jquery-mobile s taphold  Include the jquery-mobile js and the following code will work fine    document  on  pagecreate    pagename  function         p   on  taphold  function         this  hide      your code

User · Answer

While it does look simple enough to implement on your own with a timeout and a couple of mouse event handlers  it gets a bit more complicated when you consider cases like click-drag-release  supporting both press and long-press on the same element  and working with touch devices like the iPad   I ended up using the longclick jQuery plugin  Github   which takes care of that stuff for me   If you only need to support touchscreen devices like mobile phones  you might also try the jQuery Mobile taphold event

User · Answer

You can use jquery Touch events   see here     let holdBtn       holdBtn     let holdDuration   1000   let holdTimer    holdBtn on  touchend   function             finish hold         holdBtn on  touchstart   function             start hold     holdTimer   setTimeout function             action after certain time of hold        holdDuration

User · Answer

I needed something for longpress keyboard events  so I wrote this   var longpressKeys    13   var longpressTimeout   1500  var longpressActive   false  var longpressFunc   null   document addEventListener  keydown   function e        if  longpressFunc    null  amp  amp  longpressKeys indexOf e keyCode   gt  -1            longpressFunc   setTimeout function                 console log  longpress triggered                longpressActive   true             longpressTimeout           any key not defined as a longpress       else if  longpressKeys indexOf e keyCode     -1            console log  shortpress triggered               document addEventListener  keyup   function e        clearTimeout longpressFunc       longpressFunc   null          longpress key triggered as a shortpress     if   longpressActive  amp  amp  longpressKeys indexOf e keyCode   gt  -1            console log  shortpress triggered              longpressActive   false

User · Answer

You can check the time to identify Click or Long Press  jQuery   function AddButtonEventListener     try       var mousedowntime      var presstime         button id       buttonID         mousedown function             var d   new Date            mousedowntime   d getTime                   button id       buttonID         mouseup function             var d   new Date            presstime   d getTime   - mousedowntime          if  presstime  gt  999  You can decide the time                    Do Action Long Press Event                      else                 Do Action Click Event                        catch  err        alert err message

User · Answer

The Diodeus s answer is awesome  but it prevent you to add a onClick function  it ll never run hold function if you put an onclick  And the Razzak s answer is almost perfect  but it run hold function only on mouseup  and generally  the function runs even if user keep holding   So  I joined both  and made this     element  on  click   function          if longpress       if detect hold  stop onclick function         return false                element  on  mousedown   function          longpress   false    longpress is false initially     pressTimer   window setTimeout function           your code here      longpress   true    if run hold function  longpress is true       1000         element  on  mouseup   function          clearTimeout pressTimer     clear time on mouseup

User · Answer

You could set the timeout for that element on mouse down and clear it on mouse up      a   mousedown function            set timeout for this element     var timeout   window setTimeout function                  1234         this  mouseup function                clear timeout for this element         window clearTimeout timeout              reset mouse up event handler           this  unbind  mouseup            return false              return false        With this each element gets its own timeout

User · Answer

You can use taphold event of jQuery mobile API   jQuery  a   on  taphold   function  event

User · Answer

I think This can help you     x000D   x000D  var image save msg    You Can Not Save images    x000D  var no menu msg    Context Menu disabled    x000D  var smessage    Content is protected      x000D   x000D  function disableEnterKey e    x000D      if  e ctrlKey    x000D          var key  x000D          if  window event  x000D              key   window event keyCode    IE x000D          else x000D              key   e which    firefox  97  x000D            if  key    17  alert key   x000D          if  key    97    key    65    key    67    key    99    key    88    key    120    key    26    key    85    key    86    key    83    key    43    x000D              show wpcp message  You are not allowed to copy content or view source    x000D              return false  x000D            else x000D              return true  x000D        x000D    x000D   x000D  function disable copy e    x000D      var elemtype   e target nodeName  x000D      var isSafari    Safari  test navigator userAgent   amp  amp   Apple Computer  test navigator vendor   x000D      elemtype   elemtype toUpperCase    x000D      var checker IMG       x000D      if  elemtype     IMG   amp  amp  checker IMG     checked   amp  amp  e detail  gt   2    x000D          show wpcp message alertMsg IMG   x000D          return false  x000D        x000D      if  elemtype     TEXT   amp  amp  elemtype     TEXTAREA   amp  amp  elemtype     INPUT   amp  amp  elemtype     PASSWORD   amp  amp  elemtype     SELECT   amp  amp  elemtype     OPTION   amp  amp  elemtype     EMBED     x000D          if  smessage         amp  amp  e detail    2  x000D              show wpcp message smessage   x000D   x000D          if  isSafari  x000D              return true  x000D          else x000D              return false  x000D        x000D    x000D   x000D  function disable copy ie     x000D      var elemtype   window event srcElement nodeName  x000D      elemtype   elemtype toUpperCase    x000D      if  elemtype     IMG     x000D          show wpcp message alertMsg IMG   x000D          return false  x000D        x000D      if  elemtype     TEXT   amp  amp  elemtype     TEXTAREA   amp  amp  elemtype     INPUT   amp  amp  elemtype     PASSWORD   amp  amp  elemtype     SELECT   amp  amp  elemtype     OPTION   amp  amp  elemtype     EMBED     x000D            alert navigator userAgent indexOf  MSIE     x000D            if  smessage         show wpcp message smessage   x000D          return false  x000D        x000D    x000D   x000D  function reEnable     x000D      return true  x000D    x000D  document onkeydown   disableEnterKey  x000D  document onselectstart   disable copy ie  x000D  if  navigator userAgent indexOf  MSIE      -1    x000D      document onmousedown   disable copy  x000D      document onclick   reEnable  x000D    x000D   x000D  function disableSelection target    x000D        For IE This code will work x000D      if  typeof target onselectstart     undefined   x000D          target onselectstart   disable copy ie  x000D   x000D        For Firefox This code will work x000D      else if  typeof target style MozUserSelect     undefined     x000D          target style MozUserSelect    none   x000D        x000D   x000D        All other   ie  Opera  This code will work x000D      else x000D          target onmousedown   function     x000D              return false x000D            x000D      target style cursor    default   x000D    x000D     on body load x000D   x000D  window onload   function     x000D      disableSelection document body   x000D     x000D   x000D   x000D   x000D     disable Right Click x000D   x000D   x000D   x000D  document ondragstart   function     x000D      return false  x000D    x000D   x000D  function nocontext e    x000D      return false  x000D    x000D  document oncontextmenu   nocontext  x000D   x000D   x000D

User · Answer

Based on Maycow Moura s answer  I wrote this  It also ensures that the user didn t do a right click  which would trigger a long press and works on mobile devices  DEMO  var node   document getElementsByTagName  p   0   var longpress   false  var presstimer   null  var longtarget   null   var cancel   function e        if  presstimer     null            clearTimeout presstimer           presstimer   null             this classList remove  longpress        var click   function e        if  presstimer     null            clearTimeout presstimer           presstimer   null             this classList remove  longpress         if  longpress            return false             alert  press        var start   function e        console log e        if  e type      click   amp  amp  e button     0            return             longpress   false       this classList add  longpress         if  presstimer     null            presstimer   setTimeout function                 alert  long click                longpress   true             1000              return false      node addEventListener  mousedown   start   node addEventListener  touchstart   start   node addEventListener  click   click   node addEventListener  mouseout   cancel   node addEventListener  touchend   cancel   node addEventListener  touchleave   cancel   node addEventListener  touchcancel   cancel     You should also include some indicator using CSS animations   p       background  red      padding  100px      longpress       -webkit-animation  1s longpress              animation  1s longpress      -webkit-keyframes longpress       0   20    background  red        100    background  yellow        keyframes longpress       0   20    background  red        100    background  yellow

User · Answer

jQuery plugin  Just put   expression  longClick function      lt your code here gt       Second parameter is hold duration  default timeout is 500 ms    function            fn longClick   function callback  timeout            var timer          timeout   timeout    500            this  mousedown function                 timer   setTimeout function     callback       timeout               return false                        document  mouseup function                 clearTimeout timer               return false                         jQuery

User · Answer

For me it s work with that code  with jQuery    var int         null      fired       false   var longclickFilm   function  t             body css  background    red               clickFilm   function  t             t     t clone false  false           var  to      footer  gt  div first             to find   empty   remove             t appendTo  to              touchStartFilm   function event            event preventDefault            fired       false          int         setTimeout function  t                longclickFilm  t               fired   true             2000    this       2 sec for long click           return false             touchEndFilm   function event            event preventDefault            clearTimeout int           if  fired  return false          else  clickFilm   this            return false             ul thelist  thumbBox        live  mousedown touchstart   touchStartFilm       live  mouseup touchend touchcancel   touchEndFilm

User · Answer

like this   doc addEeventListener  touchstart   function           your code        false

[javascript] Long Press in JavaScript?

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-mobile

Examples related to jquery-events