Does jQuery mouseup event work on touch devices?

Question

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?

score 39 · Accepted Answer · answered Aug 05 '14 at 09:50

39

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

answered Aug 05 '14 at 09:50

dknaack

60,192
27
155
202

Thanks! Should I bind to $('body') or $(document)? – Rafff Aug 05 '14 at 09:52
You can do both if your html is valid with a body tag. – dknaack Aug 05 '14 at 09:53
2

@RafcioKowalsky always attach to it parent element. This will enhance the DOM search – Praveen Aug 05 '14 at 09:53
Thanks! So attaching bind to `body` will be faster, because `#container` is a child of `body` :) – Rafff Aug 05 '14 at 09:57
but touch events are not supported on IE, Edge, nor Safari – Akin Hwan Jun 05 '19 at 13:31

David · Answer 2 · 2019-02-28T21:30:01.560

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)

Does jQuery mouseup event work on touch devices?

2 Answers2

Linked