CODEWITHSUNDEEP
jquerytouchjquery-events
Schrute
Schrute

Reputation: 731

How to detect the mouseup event after a mousemove and long touch?

Example: http://jsfiddle.net/za14jqw0/3/

HTML:

<div id="wrapper">
    <div id="a"></div>
</div>

CSS:

#a {
    width: 30px;
    height: 30px;
    background-color: red;
}

JavaScript:

$('#wrapper').on('mouseup', function() {
    $('#a').css('background-color', 'yellow');
});

The red box changes to yellow whenever there's a mouse up event.

The problem is that on touch devices, if the user touches the screen, move the finger around and wait a few seconds, the mouseup event is not fired.

How can I detect it?

Upvotes: 1

Views: 790

Answers (1)

Jack
Jack

Reputation: 1941

To support touch devices you'll need 'touchend' too.

MDN:

The touchend event is fired when a touch point is removed from the touch surface.

jQuery

$('#wrapper').on('mouseup touchend', function() {
    $('#a').css('background-color', 'yellow');
});

FIDDLE

Caveat:

I can't find statistics regarding cross browser support, which is alarming considering the fluctuant nature of mobile browsers. If need be, you can use a libary such as jQuery mobile, which has an equivalent 'tap' event. Remember, you can select specific modules to download using the download builder to negate bloat.

Upvotes: 1

Related Questions