mouse up - click outside of Div not working on mobile

Question

I use the following to hide a div and ovelay div when clicking outside a form.

The following javascript is:

$(document).mouseup(function (e)
{
  var container = $("#feedbackform");
  var overlay = $("#overlay");

  if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
  {
    $('#feedbackform').fadeOut('fast'),
    $('#overlay').fadeOut('fast');
  }
});

This works fine on a desktop but not on touch mobile devices.

Im guessing its to do with mouseup, any suggestions?

Craig.

Answer 1

Classic events won't work exactly the same on mobile devices (except some events such as 'click' which is quite the same).

So now you have some mobile specific events named touch events : https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events

So touchend is probably the one you want to use :

$(document).on('mouseup touchend', function (e){

[...]

});