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?

Lynnelynnea

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

Lynnelynnea

$('body').on( "mousedown touchstart", function(e){ // this would work on desktop and mobile devices at the same time }) – Flirtatious

Just want to add, don't forget to use e.preventDefault() in case of overlay/model-popup. – Velamen

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)

Tick

Hmm, I'm not sure about that, but its working perfectly for me on the ipad. :) – Lynnelynnea

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'.

Mongolism

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

You will notice that I use mousedown with touchstart and mouseup with touchend. This cover mobile and desktop use.

Huelva