2010-07-21 13 views
34

Sto usando il codice corrente:fa mousedown/mouseup nel lavoro jquery per l'ipad?

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

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

Questa grande opera in Safari, ma quando ho caricarlo e check it out sul iPad doesnt funziona?

risposta

79

ho scoperto come fare questo per l'iPad per coloro che sono interessati:

Invece del codice che ho usato nella mia interrogazione, si può usare:

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

&

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

$ ('body'). On ("TouchStart MouseDown", function (e) {// questo dovrebbe funzionare su dispositivi desktop e mobile allo stesso tempo }) – Denis

+0

Voglio solo aggiungere, non dimenticare per usare 'e.preventDefault()' in caso di overlay/model-popup. – Arshad

7

Non esattamente.

Apple Docs

RDA:

un elemento cliccabile è un link, elemento forma, area mappa immagine, o qualsiasi altro elemento con mousemove, mousedown, mouseup, o onclick gestori . Un elemento scorrevole è qualsiasi elemento con uno stile di overflow appropriato, aree di testo e elementi iframe scorrevoli. A causa di queste differenze, potrebbe essere necessario modificare alcuni elementi negli elementi selezionabili , come descritto in "Making Elements Clickable", per ottenere il comportamento desiderato di nel SO iPhone.

(sottolineatura mia)

+0

Hmm, non ne sono sicuro, ma funziona perfettamente per me sull'ipad. :) – Annie

6

Non proprio rispondere alla tua domanda, ma può essere utile per le persone che sono venuti qui solo per cercare 'jQuery mousedown/mouseup su iPad'

Io uso sempre questo piccolo trucco:

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

Ciò fa scattare il contatto quando si utilizza un iPad e inverte l'azione quando si fa clic al di fuori dell'elemento in quanto si tratta di un passaggio del mouse ancora t. Così, per esempio:

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

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

Crea un effetto di fade in 'al clic', e un effetto fade out 'sul mouseup'.

Problemi correlati