CODEWITHSUNDEEP
jquerymouseup
Rafff
Rafff

Reputation: 1518

Does jQuery mouseup event work on touch devices?

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?

Upvotes: 19

Views: 22173

Answers (2)

David
David

Reputation: 2336

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)

Upvotes: 0

dknaack
dknaack

Reputation: 60438

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

Upvotes: 39

Related Questions