does mousedown /mouseup in jquery work for the ipad?

Question

I am using the current code:

$('body').mousedown(function() {
        $('div#extras').fadeTo('fast', 1);
});

$('body').mouseup(function() {
        $('div#extras').delay(2000).fadeTo(1500, 0);
});

This works great in safari but when I upload it and check it out on the ipad it doesnt work?

Answer 1

I found out how to do this for the ipad for those who are interested:

Instead of the code I used in my question, you would use:

$('body').bind( "touchstart", function(e){
        $('div#extras').fadeTo('fast', 1);
});

&

$('body').bind( "touchend", function(e){
        $('div#extras').delay(2000).fadeTo(1500, 0);
});

Answer 2

Not exactly.

Apple Docs

Quote:

A clickable element is a link, form element, image map area, or any other element with mousemove, mousedown, mouseup, or onclick handlers. A scrollable element is any element with appropriate overflow style, text areas, and scrollable iframe elements. Because of these differences, you might need to change some of your elements to clickable elements, as described in “Making Elements Clickable,” to get the desired behavior in iPhone OS.

(emphasis mine)

Answer 3

Not really answering your question, but may be handy for people who came here just to look for 'jQuery mousedown/mouseup on ipad'

I always use this little trick:

$(element).hover(function() {
   // Do something
});

This triggers on touch when using an iPad and reverses the action when clicking outside of the element since it's an hover event. So for example:

// Assuming the element has 'opacity: 0' in CSS

$(element).hover(function() {
   $(this).animate({'opacity': 1}, 200);
});

Creates a fade in effect 'on click', and a fade out effect 'on mouseup'.

Answer 4

Old post but there is universal solution:

$('body').on('mousedown touchstart',function(e){
    $('div#extras').fadeTo('fast', 1);
});
$('body').on('mouseup touchend',function(e){
    $('div#extras').delay(2000).fadeTo(1500, 0);
});