web-dev-qa-db-fra.com

est-ce que mousedown / mouseup dans jquery fonctionne pour l'ipad?

J'utilise le code actuel:

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

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

Cela fonctionne très bien en safari, mais lorsque je le télécharge et le vérifie sur l'ipad, cela ne fonctionne pas?

jqueryipadonmousedown
36
Annie

J'ai découvert comment faire cela pour l'ipad pour ceux qui sont intéressés:

Au lieu du code que j'ai utilisé dans ma question, vous utiliseriez:

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

&

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

Pas exactement.

Apple Docs

Citation:

Un élément cliquable est un lien, un élément de formulaire, une zone de carte d'image ou tout autre élément avec mousemove, mousedown , mouseup , ou des gestionnaires onclick. Un élément à défilement est tout élément avec un style de débordement, des zones de texte et des éléments iframe à défilement appropriés. En raison de ces différences, vous devrez peut-être modifier certains de vos éléments en éléments cliquables, comme décrit dans " Rendre les éléments cliquables ", pour obtenir le comportement souhaité dans iPhone OS.

(c'est moi qui souligne)

8
scunliffe

Ne répondant pas vraiment à votre question, mais peut être utile pour les personnes qui sont venues ici juste pour chercher 'jQuery mousedown/mouseup on ipad'

J'utilise toujours ce petit truc:

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

Cela se déclenche au toucher lorsque vous utilisez un iPad et inverse l'action lorsque vous cliquez en dehors de l'élément puisqu'il s'agit d'un événement de survol. Ainsi, par exemple:

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

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

Crée un effet de fondu "au clic" et un effet de fondu "à la souris".

6
Jeffrey Roosendaal

Ancien poste mais il existe une solution universelle:

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

Vous remarquerez que j'utilise mousedown avec touchstart et mouseup avec touchend. Cela couvre l'utilisation mobile et de bureau.

2
Ivijan Stefan Stipić