document click function for touch device

Question

I ve got a sub-nav that works using jquery - A user clicks on the top level list item  for instance  services  which triggers the dropdown  The dropdown toggles via clicking the  service  link  I ve made it so a user can click anywhere on the screen to toggle the dropdown to a closed state  But as the site is responsive i want the user to be able to click  touch  anywhere on the screen to close the dropdown but my problem is that it s not working on the touch devices    My code ive setup for the document click is     document  click function event        if       children   is   visible             ul children   slideUp  slow               I m assuming document click might not work on touch devices  and if not  what work-around is there to achieve the same effect   Thanks

User · Answer

As stated above  using  click touchstart  will get the desired result   If you console log e  your clicks though  you may find that when jquery recognizes touch as a click - you will get 2 actions from click and touchstart   The solution bellow worked for me     if its a mobile device use  touchstart  if   Android webOS iPhone iPad iPod BlackBerry IEMobile Opera Mini i test navigator userAgent          deviceEventType    touchstart    else     If its not a mobile device use  click      deviceEventType    click       document  on specialEventType  function e         code here

User · Answer

To trigger the function with click or touch  you could change this     document  click  function        To this     document  on  click touchstart   function        Or this     document  on  click touch   function        The touchstart event fires as soon as an element is touched  the touch event is more like a  tap   i e  a single contact on the surface  You should really try each of these to see what works best for you  On some devices  touch can be a little harder to trigger  which may be a good or bad thing - it prevents a drag being counted  but an accidental small drag may cause it to not be fired

User · Answer

touchstart or touchend are not good  because if you scroll the page  the device do stuff  So  if I want close a window with tap or click outside the element  and scroll the window  I ve done     document  on  touchstart   function         documentClick   true        document  on  touchmove   function         documentClick   false        document  on  click touchend   function event        if  event type     click   documentClick   true      if  documentClick           doStuff

User · Answer

can you use jqTouch or jquery mobile   there it s much easier to handle touch events  If not then you need to simulate click on touch device  follow this articles   iphone-touch-events-in-javascript  A touch demo   More in this thread

User · Answer

the approved answer does not include the essential return false to prevent touchstart from calling click if click is implemented which will result in running the handler twoce   do     btn  on  click touchstart   e   gt        your code        return false

User · Answer

To apply it everywhere  you could do something like     body   on  click   function        if     children   is   visible               ul children   slideUp  slow

[jquery] document .click function for touch device

Examples related to jquery

Examples related to css