document .click function for touch device

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

Update! In modern browsers, the click event will be fired for a tap, so you don't need to add extra touchstart or touchend events as click should suffice.

This previous answer worked for a time with browsers that thought a tap was special. It originally included a "touch" event that actually was never standardised.

Unless you have a problem with:

$(document).on('click', function () { ... });

There is no need to change anything!

Previous information, updated to remove touch...

To trigger the function with click or touch, you could change this:

$(document).click( function () {

To this:

$(document).on('click touchstart', function () {

The touchstart event fires as soon as an element is touched, so it may be more appropriate to use touchend depending on your circumstances.

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();
    }
 });

can you use http://www.jqtouch.com/">jqTouch</a> or http://jquerymobile.com/">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:

http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript">iphone-touch-events-in-javascript</a>

http://jsfiddle.net/bN2Jr/6/">A touch demo

https://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery">More in this thread

To apply it everywhere, you could do something like

$('body').on('click', function() {
if($('.children').is(':visible')) {
$('ul.children').slideUp('slow');
}
});

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
});

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 => { 
   your code ...
   return false; 
});