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();
}
});
To bring this thread up-to-date (i.e. 2019), note that jQuery deprecated 'bind' as of version 3.
Today when I first-tested a 'thumb-slider' (i.e. input element, type='range') on Android, it failed, because my event-functions named only mousemove and and mouseup respectively.
I simply changed them to:
$('#sliderID').on('touchmove mousemove', function(event){ ... } and $('#sliderID').on('touchend mouseup', function(event){ ... } and now the webapp works on both PC(Windows-10) and Android(v7.1) My jQuery version is 3.3.1.
(These are the only two platforms I have available to me for testing, but I'm confident that this works in all major browsers. I've been successful on Chrome, Opera, Firefox, and Edge-on-Win10)
来源:https://stackoverflow.com/questions/25135736/does-jquery-mouseup-event-work-on-touch-devices