I couldn't find any answer so I'm asking here. Currently I don't own any touch devices so I can't test it.
The following code hides all subcontainers in a container if clicked outside of it.
$(document).mouseup(function(e) {
var container = $('#container');
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
{
$('.subcontainer').hide();
}
});
Does this work on touch devices or there is any equivalent of mouseup
for touch devices?
No, it does not work. But here is a touchstart
and touchend
event.
$(document).bind( "mouseup touchend", function(e){
var container = $('#container');
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
{
$('.subcontainer').hide();
}
});