How to bind touchstart and click events but not respond to both

Question

I m working on a mobile web site that has to work on a variety of devices  The one s giving me a headache at the moment are BlackBerry   We need to support both keyboard clicks as well as touch events    Ideally I d just use    thing click function           but the issue we re running into is that some of these blackberry devices have an very annoying delay from the time of the touch to it triggering a click    The remedy is to instead use touchstart    thing bind  touchstart   function event          But how do I go about binding both events  but only firing one  I still need the click event for keyboard devices  but of course  don t want the click event firing if I m using a touch device   A bonus question  Is there anyway to do this and additionally accommodate browsers that don t even have a touchstart event  In researching this  it looks like BlackBerry OS5 doesn t support touchstart so will also need to rely on click events for that browser    ADDENDUM   Perhaps a more comprehensive question is   With jQuery  is it possible recommended to handle both touch interactions and mouse interactions with the same bindings   Ideally  the answer is yes  If not  I do have some options   1  We use WURFL to get device info so could create our own matrix of devices  Depending on the device  we ll use touchstart OR click    2  Detect for touch support in the browser via JS  I need to do some more research on that  but it seems like that is doable    However  that still leaves one issue  what about devices that support BOTH  Some of the phones we support  namely the Nokias and BlackBerries  have both touch screens and keyboards  So that kind of takes me full circle back to the original question   is there a way to allow for both at once somehow

User · Answer

There are many things to consider when trying to solve this issue. Most solutions either break scrolling or don't handle ghost click events properly.

For a full solution see https://developers.google.com/mobile/articles/fast_buttons

NB: You cannot handle ghost click events on a per-element basis. A delayed click is fired by screen location, so if your touch events modify the page in some way, the click event will be sent to the new version of the page.

User · Answer

I am trying this and so far it works  but I am only on Android Phonegap so caveat emptor     function filterEvent  ob  ev           if  ev type     touchstart               ob off  click   on  click   function e   e preventDefault                          keypad   on  touchstart click     number   dot   function event          filterEvent      keypad    event          console log  event type        debugging only                finish handling touch events          I don t like the fact that I am re-binding handlers on every touch  but all things considered touches don t happen very often  in computer time    I have a TON of handlers like the one for   keypad  so having a simple function that lets me deal with the problem without too much code is why I went this way

User · Answer

I gave an answer there and I demonstrate with a jsfiddle  You can check for different devices and report it   Basically I use a kind of event lock with some functions that serve it         Event lock functions                             function getEventLock evt  key      if typeof eventLock key       undefined          eventLock key              eventLock key  primary   evt type        return true          if evt type    eventLock key  primary        return true     else       return false     function primaryEventLock evt  key      eventLock key  primary   evt type      Then  in my event handlers I start by a request to my lock         Event handlers                           add   on  touchstart mousedown   addStart       add   on  touchend mouseup   addEnd   function addStart evt         race condition between  mousedown  and  touchstart     if  getEventLock evt   add          return         some logic    now   new Date   getTime       press   -defaults pressDelay     task           enable event lock and    event repetition    pids add   setTimeout closure  defaults pressDelay       function closure               some logic     comment out to disable repetition       task              set primary input device       primaryEventLock evt   add              enable event repetition       pids add   setTimeout closure  defaults pressDelay          function addEnd evt         clearTimeout pids add       I have to stress that the problem is not to respond simply at a event but to NOT respond on both   Finally  at jsfiddle there is a link to an updated version where I introduce minimal impact at existing code by adding just a simple call to my event lock library both at event start  amp  end handlers along with 2 scope variables eventLock and eventLockDelay

User · Answer

I just came up with the idea to memorize if ontouchstart was ever triggered  In this case we are on a device which supports it and want to ignore the onclick event  Since ontouchstart should always be triggered before onclick  I m using this    x000D   x000D   lt script gt  touchAvailable   false   lt  script gt  x000D   lt button ontouchstart  touchAvailable true  myFunction     onclick  if  touchAvailable  myFunction     gt Button lt  button gt  x000D   x000D   x000D

User · Answer

Usually this works as well       buttonId   on  touchstart click   function e       e stopPropagation    e preventDefault          your code here

User · Answer

If you are using jQuery the following worked pretty well for me   var callback     Initialize this to the function which needs to be called    target  on  click touchstart   selector   function  func       var timer   0      return function e           if    now   - timer  lt  500  return false          timer     now            func e            callback      Other solutions are also good but I was binding multiple events in a loop and needed the self calling function to create an appropriate closure  Also  I did not want to disable the binding since I wanted it to be invoke-able on next click touchstart   Might help someone in similar situation

User · Answer

find the document scroll move difference  both horizontal and vertical   touchstart and touchend   if one of them is larger than 1 pixel  then it is move rather than click   var touchstartverscrollpos   touchstarthorscrollpos           body   on  touchstart    thumbnail  function e            touchstartverscrollpos     document  scrollTop            touchstarthorscrollpos     document  scrollLeft                        body   on  touchend    thumbnail  function e             var touchendverscrollpos     document  scrollTop            var touchendhorscrollpos     document  scrollLeft             var verdiff   touchendverscrollpos - touchstartverscrollpos          var hordiff   touchendhorscrollpos - touchstarthorscrollpos            if  Math abs verdiff   lt 1  amp  amp  Math abs hordiff  lt 1       do you own function    here                 e stopImmediatePropagation                 return false

User · Answer

You could try like this   var clickEvent      ontouchstart  in document documentElement   touchstart   click        mylink   on clickEvent  myClickHandler

User · Answer

The best method I have found is to write the touch event and have that event call the normal click event programatically  This way you have all your normal click events and then you need to add just one event handler for all touch events  For every node you want to make touchable  just add the  touchable  class to it to invoke the touch handler  With Jquery it works like so with some logic to make sure its a real touch event and not a false positive      body   on  touchstart     touchable   function       make touchable  items fire like a click event var d1   new Date    var n1   d1 getTime    setTimeout function             touchable   on  touchend   function event            var d2   new Date            var n2   d2 getTime            if  n2 - n1  lt   300                  event target  trigger  click      dont do the action here just call real click handler                      50    on  click     myelement   function       all the behavior i originally wanted

User · Answer

For simple features  just recognize touch or click I use the following code   var element       element     element click function e      if e target ontouchstart     undefined          console log   touch         return        console log   no touch           This will return  touch  if the touchstart event is defined and  no touch  if not  Like I said this is a simple approach for click tap events just that

User · Answer

Just adding return false  at the end of the on  click touchstart   event function can solve this problem      this  on  click touchstart   function          Do things   return false        From the jQuery documentation on  on       Returning false from an event handler will automatically call event stopPropagation   and event preventDefault    A false value can also be passed for the handler as a shorthand for function    return false

User · Answer

It may be effective to assign to the events  touchstart mousedown  or  touchend mouseup  to avoid undesired side-effects of using click

User · Answer

This hasn t been mentioned here  but you may want to check out this link  https   joshtronic com 2015 04 19 handling-click-and-touch-events-on-the-same-element  To recap for posterity  instead of trying to assign to both handlers and then sort out the result  you can simply check if the device is a touchscreen or not and only assign to the relevant event  Observe  var clickEvent    function       if   ontouchstart  in document documentElement     true      return  touchstart     else     return  click             and assign thusly   el addEventListener  clickEvent  function  e            things and stuff      I am using this to bind my events so that I can test on touchscreens that handle both touchstart and click events which would fire twice  and on my development PC which only hears the click One problem the author of that link mentions though  is touchscreen laptops designed to handle both events   I learned about a third device I was not considering  the touchscreen laptop  It   s a hybrid device that supports both touch and click events  Binding one event means only that event be supported  Does that mean someone with a touchscreen and mouse would have to explicitly touch because that   s the only event I am handling  Binding touchstart and click seemed ideal to handle these hybrid devices  To keep the event from firing twice  I added e stopPropagation   and e preventDefault   to the callback functions  e stopPropagation   stops events from    bubbling up    to their parents but also keeps a second event from firing  I included e preventDefault   as a    just in case    but seems like it could be omitted

User · Answer

Just for documentation purposes  here s what I ve done for the fastest most responsive click on desktop tap on mobile solution that I could think of   I replaced jQuery s on function with a modified one that  whenever the browser supports touch events  replaced all my click events with touchstart     fn extend    on   function    return   fn on             fn extend       on   function            var isTouchSupported    ontouchstart  in window    window DocumentTouch  amp  amp  document instanceof DocumentTouch          return function  types  selector  data  fn  one                 if  typeof types     string   amp  amp  isTouchSupported  amp  amp    types match  touch gi    types   types replace  click gi   touchstart                return this  on  types  selector  data  fn                              Usage than would be the exact same as before  like       my-button   on  click   function                    But it would use touchstart when available  click when not  No delays of any kind needed  D

User · Answer

Here s a simple way to do it      A very simple fast click implementation  thing on  click touchstart   function e      if     document  data  trigger      document  data  trigger   e type     if  e type     document  data  trigger             Do your stuff here           You basically save the first event type that is triggered to the  trigger  property in jQuery s data object that is attached to the root document  and only execute when the event type is equal to the value in  trigger   On touch devices  the event chain would likely be  touchstart  followed by  click   however  the  click  handler won t be executed because  click  doesn t match the initial event type saved in  trigger    touchstart     The assumption  and I do believe it s a safe one  is that your smartphone won t spontaneously change from a touch device to a mouse device or else the tap won t ever register because the  trigger  event type is only saved once per page load and  click  would never match  touchstart    Here s a codepen you can play around with  try tapping on the button on a touch device -- there should be no click delay   http   codepen io thdoan pen xVVrOZ  I also implemented this as a simple jQuery plugin that also supports jQuery s descendants filtering by passing a selector string      A very simple fast click plugin    Syntax   fastClick  selector   handler    fn fastClick   function arg1  arg2      var selector  handler    switch  typeof arg1        case  function         selector   null        handler   arg1        break      case  string         selector   arg1        if  typeof arg2    function   handler   arg2        else return        break      default        return        this on  click touchstart   selector  function e        if     document  data  trigger      document  data  trigger   e type       if  e type     document  data  trigger    handler apply this  arguments              Codepen  http   codepen io thdoan pen GZrBdo

User · Answer

I am also working on an Android iPad web app  and it seems that if only using  touchmove  is enough to  move components    no need touchstart     By disabling touchstart  you can use  click    from jQuery  It s actually working because it hasn t be overloaded by touchstart   Finally  you can binb  live  touchstart   function e    e stopPropagation        to ask the touchstart event to stop propagating  living room to click   to get triggered   It worked for me

User · Answer

I succeeded by the following way   Easy Peasy       this  on  touchstart click   function e     e preventDefault        do your stuff here

User · Answer

Being for me the best answer the one given by Mottie  I m just trying to do his code more reusable  so this is my contribution   bindBtn    loginbutton  loginAction    function bindBtn element action    var flag   false    element  bind  touchstart click   function e        e preventDefault        if   flag            flag   true          setTimeout function                 flag   false             100              do something         action              return false

User · Answer

Taking advantage of the fact that a click will always follow a touch event  here is what I did to get rid of the  ghost click  without having to use timeouts or global flags       buttonId   on  touchstart click   function event       if    this  data  already                this  data  already   false           return false        else if  event type     touchstart               this  data  already   true               your code here       Basically whenever an ontouchstart event fires on the element  a flag a set and then subsequently removed  and ignored   when the click comes

User · Answer

You could try something like this   var clickEventType   document ontouchstart   null   click   touchstart        mylink   bind clickEventType  myClickHandler

User · Answer

Another implementation for better maintenance   However  this technique will also do event stopPropagation     The click is not caught on any other element that clicked for 100ms   var clickObject         flag  false      isAlreadyClicked  function              var wasClicked   clickObject flag          clickObject flag   true          setTimeout function      clickObject flag   false     100           return wasClicked                myButton   bind  click touchstart   function  event       if   clickObject isAlreadyClicked

User · Answer

Why not use the jQuery Event API   http   learn jquery com events event-extensions   I ve used this simple event with success  It s clean  namespaceable and flexible enough to improve upon   var isMobile    Android webOS iPhone iPad iPod BlackBerry i test navigator userAgent   var eventType   isMobile    touchstart     click    jQuery event special touchclick       bindType  eventType    delegateType  eventType

User · Answer

UDPATE   I ve been working on an implementation to use both click and touchend events for the same function  and the function effectively blocks events if the type changes  My goal was to have a more responsive application interface - I wanted to reduce time for the event start to UI feedback loop   For this implementation to work  the assumption is that you have all your related events added on  click  and  touchend   This prevents one element from being deprived of event bubbling should both events be required to run  but are of different types   Here is an lightweight API based implementation that I have simplified for demonstration purposes  It demonstrates how to use the functionality on a collapse element   var tv                     method eventValidator           desc responsible for validating event of the same type          param  Object  e - event object         param  Object  element - element event cache         param  Function  callback - callback to invoke for events of the same type origin         param  Object   context  - context to pass to callback function         param  Array   args  - arguments array to pass in with context  Requires context to be passed         return  Object  - new event cache             eventValidator  function e  element  callback  context  args           if element  amp  amp  element type  amp  amp  element type     e type               e stopPropagation                e preventDefault                return tv createEventCacheObj     true             else               element   tv createEventCacheObj e                typeof context      object    callback apply context  args    callback                 return element                                    method createEventCacheObj           param  Object  event - event object         param  String   event type  - event type         param  Number   event timeStamp  - time of event in MS since load         param  Boolean   reset false  - flag to reset the object         returns   type     time  string               createEventCacheObj  function  event  reset           if typeof reset      boolean   reset   false          return               type   reset   event type   null              time   reset    event timeStamp  toFixed 2   null                         Here is where the magic happens var eventCache       var pos   0   var  collapses   document getElementsByClassName  tv-collapse  heading        Array prototype forEach call  collapses  function ele           ele addEventListener  click   toggleCollapse           ele addEventListener  touchend   toggleCollapse               Cache mechanism         ele setAttribute  data-event-cache   String pos                       func toggleCollapse       param  Object  e - event object     desc responsible for toggling the state of a collapse element     function toggleCollapse e       eventCache pos    tv eventValidator e  eventCache pos   function              Any event which isn t blocked will run the callback and its content           the context and arguments of the anonymous function match the event function context and arguments  assuming they are passed using the last two parameters of tv eventValidator          this  arguments       Original Answer   Here is a response which is a modification of Rafael Fragoso s answer - pure JS    x000D   x000D   function    x000D     x000D    button   document getElementById  sayHi    x000D     x000D    button addEventListener  touchstart   ohHai   x000D    button addEventListener  click   ohHai   x000D   x000D    function ohHai event   x000D      event stopPropagation    x000D      event preventDefault    x000D      console log  ohHai is    event type   x000D       x000D        x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D       lt meta charset  UTF-8  gt  x000D       lt title gt SO - Answer lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D     lt button id  sayHi  gt Anyone there  lt  button gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Run the snippet on the following and pay attention to the output    Phone Tablet Tablet  Desktop Mode - if applicable  Desktop Desktop  Touch Screen - if applicable    The key is we are stopping successive events from firing  Mobile browsers do their best to emulate a click when a touch happens  I wish I could find the link to an article a saw a while back that explains all the events that occur after touchstart through click   I was searching for the 300ms delay between double tap and click actually firing    Touch and Mouse Devices  I ran a couple of tests using a Surface Pro and a windows 10 desktop with a touchscreen  What I found was that they both triggered events as you would suspect  touchstart for touches and click for trackpad  mouse  and stylist  The interesting thing was that a touch event which was near  but not on the button  would triggering a click event without a touch event  It seems that the built in functionality in Windows 10 looks for the closest nodes within a radius and if a node is found it will fire a mouse based event   Multiple Events of the Same Type  If two events of the same type are on an element  stopping the event from bubbling up could prevent one of the events from firing  There are a couple of different ways to handle this using some sort of cache  My initial thoughts were to modify the event object  but we get a reference so I m thinking a cache solution will have to suffice

User · Answer

I had to do something similar  Here is a simplified version of what worked for me  If a touch event is detected  remove the click binding    thing on  touchstart click   function event     if  event type     touchstart         this  off  click         your code here       In my case the click event was bound to an  lt a gt  element so I had to remove the click binding and rebind a click event which prevented the default action for the  lt a gt  element    thing on  touchstart click   function event     if  event type     touchstart         this  off  click   on  click   function e   e preventDefault             your code here

User · Answer

I believe the best practice is now to use      object   on  touchend mouseup   function            touchend   The touchend event is fired when a touch point is removed from the touch surface    The touchend event will not trigger any mouse events       mouseup   The mouseup event is sent to an element when the mouse pointer is over the element  and the mouse button is released  Any HTML element can receive this event    The mouseup event will not trigger any touch events   EXAMPLE  x000D   x000D      click   on  mouseup   function      alert  Event detected            touch   on  touchend   function      alert  Event detected        x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt h1 id  click  gt Click me lt  h1 gt   lt h1 id  touch  gt Touch me lt  h1 gt  x000D   x000D   x000D    EDIT  2017  As of 2017  browsers starting with Chrome are making steps towards making the click event  on  quot click quot   more compatible for both mouse and touch by eliminating the delay generated by tap events on click requests  This leads to the conclusion that reverting back to using just the click event would be the simplest solution moving forward  I have not yet done any cross browser testing to see if this is practical

User · Answer

Try to use Virtual Mouse  vmouse  Bindings from jQuery Mobile  It s virtual event especially for your case    thing on  vclick   function event             http   api jquerymobile com vclick   Browser support list  http   jquerymobile com browser-support 1 4

User · Answer

In my case this worked perfectly   jQuery document  on  mouseup keydown touchend   function  event    var eventType   event type  if  eventType     touchend         jQuery this  off  mouseup            The main problem was when instead mouseup I tried with click  on touch devices triggered click and touchend at the same time  if i use the click off  some functionality didn t worked at all on mobile devices  The problem with click is that is a global event that fire the rest of the event including touchend

User · Answer

check fast buttons and chost clicks from google https   developers google com mobile articles fast buttons

User · Answer

EDIT  My former answer  based on answers in this thread  was not the way to go for me  I wanted a sub-menu to expand on mouse enter or touch click and to collapse on mouse leave or another touch click  Since mouse events normally are being fired after touch events  it was kind of tricky to write event listeners that support both touchscreen and mouse input at the same time   jQuery plugin  Touch Or Mouse  I ended up writing a jQuery plugin called  Touch Or Mouse   897 bytes minified  that can detect whether an event was invoked by a touchscreen or mouse  without testing for touch support    This enables the support of both touchscreen and mouse at the same time and completely separate their events   This way the OP can use touchstart or touchend for quickly responding to touch clicks and click for clicks invoked only by a mouse   Demonstration  First one has to make ie  the body element track touch events     document body  touchOrMouse  init      Mouse events our bound to elements in the default way and by calling  body touchOrMouse  get   e  we can find out whether the event was invoked by a touchscreen or mouse       link   click function e      var touchOrMouse     document body  touchOrMouse  get   e      if  touchOrMouse      touch            Handle touch click        else if  touchOrMouse      mouse            Handle mouse click          See the plugin at work at http   jsfiddle net lmeurs uo4069nh   Explanation     This plugin needs to be called on ie  the body element to track touchstart and touchend events  this way the touchend event does not have to be fired on the trigger element  ie  a link or button   Between these two touch events this plugin considers any mouse event to be invoked by touch    Mouse events are fired only after touchend  when a mouse event is being fired within the ghostEventDelay  option  1000ms by default  after touchend  this plugin considers the mouse event to be invoked by touch    When clicking on an element using a touchscreen  the element gains the  active state  The mouseleave event is only fired after the element loses this state by ie  clicking on another element  Since this could be seconds  or minutes   after the mouseenter event has been fired  this plugin keeps track of an element s last mouseenter event  if the last mouseenter event was invoked by touch  the following mouseleave event is also considered to be invoked by touch

User · Answer

This worked for me  mobile listens to both  so prevent the one  which is the touch event  desktop only listen to mouse     btnUp bind  touchstart mousedown  function e        e preventDefault          if  e type      touchstart              return               var val    step   options arrowStep                    evt  Button    val  true

User · Answer

Well    All of these are super complicated   If you have modernizr  it s a no-brainer   ev   Modernizr touch    touchstart     click        menu   on ev    href   open-menu     function        winning

User · Answer

This is the fix that I  create  and it take out the GhostClick and implements the FastClick  Try on your own and let us know if it worked for you         document  on  touchstart click     myBtn   function event           if event handled     false  return         event stopPropagation            event preventDefault            event handled   true              Do your magic here

User · Answer

Update  Check out the jQuery Pointer Events Polyfill project which allows you to bind to  pointer  events instead of choosing between mouse  amp  touch     Bind to both  but make a flag so the function only fires once per 100ms or so   var flag   false   thing bind  touchstart click   function      if   flag        flag   true      setTimeout function    flag   false     100          do something        return false

User · Answer

Generally you don t want to mix the default touch and non-touch  click  api  Once you move into the world of touch it easier to deal only with the touch related functions  Below is some pseudo code that would do what you want it to   If you connect in the touchmove event and track the locations you can add more items in the doTouchLogic function to detect gestures and whatnot   var touchStartTime  var touchStartLocation  var touchEndTime  var touchEndLocation    thing bind  touchstart    function          var d   new Date         touchStartTime   d getTime         touchStartLocation   mouse location x y         thing bind  touchend    function          var d   new Date         touchEndTime  d getTime         touchEndLocation  mouse location x y        doTouchLogic         function doTouchLogic          var distance   touchEndLocation - touchStartLocation       var duration   touchEndTime - touchStartTime        if  duration  lt   100ms  amp  amp  distance  lt   10px                 Person tapped their finger  do click tap stuff here              if  duration  gt  100ms  amp  amp  distance  lt   10px                 Person pressed their finger  not a quick tap              if  duration  lt   100ms  amp  amp  distance  gt  10px                 Person flicked their finger             if  duration  gt  100ms  amp  amp  distance  gt  10px                 Person dragged their finger

User · Answer

I m not sure if this works on all browsers and devices  I tested this using Google Chrome and Safari iOS    thing on  click    touchend   function e          The OR opperand should fire only the first event  on desktop that should be click and on an iPhone that should be touchend

User · Answer

Instead of the timeout you could use a counter    var count   0   thing bind  touchstart click   function      count      if  count  2    0      count 2  gives the remaining counts when devided by 2        do something        return false

[jquery] How to bind 'touchstart' and 'click' events but not respond to both?

Examples related to jquery

Examples related to click

Examples related to touchstart