web-dev-qa-db-fra.com

correction de survol automatique iOS?

Existe-t-il un plug-in jQuery ou un script JavaScript qui parcourt automatiquement chaque survol CSS (trouvé dans une feuille de style externe) et le lie à un événement de double touché?

  • Touchdown 1 - CSS: le survol est déclenché
  • Touchdown 2 - Cliquez sur (lien suivant ou action du formulaire)

S'il n'y a pas encore quelque chose comme ça, peut-on le faire et comment (lignes directrices)?

MODIFIER:

Pour être clair, je ne suis pas à la recherche d'un double tap. Touchdown 1 est un onglet unique, tout comme Touchdown 2. Il peut y avoir moins de 0 secondes entre les deux ou autant que 3 minutes, c'est le choix de l'utilisateur.

Pas touche:

  • : survol -> l'élément devient visible
  • cliquez sur -> lien suivant ou autre action

Touchez (iOS):

  • touchdown 1 -> l'élément devient visible
  • touchdown 2 -> lien suivant ou autre action
javascriptiphonecsshover
16
DADU

Essaye ça:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>iPad Experiment</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            if(navigator.platform == "iPad") {
                $("a").each(function() { // have to use an `each` here - either a jQuery `each` or a `for(...)` loop
                    var onClick; // this will be a function
                    var firstClick = function() {
                        onClick = secondClick;
                        return false;
                    };
                    var secondClick = function() {
                        onClick = firstClick;
                        return true;
                    };
                    onClick = firstClick;
                    $(this).click(function() {
                        return onClick();
                    });
                });
            }
        });
    </script>
    <style type="text/css">
        a:hover {
            color:white;
            background:#FF00FF;
        }
    </style>
<body>
    <a href="http://google.ca">Google</a>
    <a href="http://stackoverflow.com">stackoverflow.com</a>
</body>
</html>

... ou consultez la démo sur mon site Web . Notez qu'il est configuré pour fonctionner uniquement sur l'iPad - la détection de toutes les versions de l'iOS est une autre question de mes livres;)

Cela fonctionne sur la base du fait que ...

Une fois que vous avez cliqué sur un lien de l'iphone ou de l'ipad, un survol simulé de la souris déclenche le style a: hover css sur ce lien. Si le lien a un gestionnaire javascript qui vous maintient sur la même page, l'état de survol ne changera pas tant que vous ne cliquez pas sur un autre lien.

Citation: Safari iphone/ipad “survol de la souris” sur le nouveau lien après le remplacement du précédent par javascript

13
Richard JP Le Guen

J'ai utilisé ceci:

$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

Avant, autoriser le survol sur certains éléments. Évidemment, vous aurez besoin de le modifier pour votre propre usage, mais c'est un bon moyen de permettre un effet de survol tactile.

6
Rich Bradshaw

Voici une autre version optimisée qui gère également closing the: hover

Vous devrez encapsuler votre site avec un

<div id="container"></div>

pour que cela fonctionne. Le simple fait de mettre la clôture sur le corps n'a rien fait

var bodyBound = false;
var container;

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPad/i))
{
    container = $("#container");

     // Provoke iOS :hover event
    $("a.someLink").on("mouseover", handleHoverClick);
}

function handleClose(event)
{
    container.off("click", handleClose);

    bodyBound = false;
}

function handleHoverClick(event)
{
    if (!bodyBound)
    {
        bodyBound = true;

        // Somehow, just calling this function—even if empty—closes the :hover
        container.on("click", handleClose);
    }
}
3
Steven Vachon

J'ai créé cette mise à jour sur la solution Richard JP Le Guens. Cela fonctionne très bien, mais ma version corrige le problème reconnu par DADU.

J'ai aussi corrigé sa solution de contournement pour détecter les iPad. Ma solution détecte également tout autre appareil tactile (sauf IE10 sur une surface MS, je ne me souvenais pas du traitement spécial MS).

Mon correctif n'est pas une solution parfaite à 100%, mais il réinitialise le correctif de survol au moins lors du survol d'un autre lien.

<!DOCTYPE html>
<html>
<head>
    <title>TouchDevice Experiment</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            if(document.createEvent("TouchEvent")) { // using document.createEvent is more reliable than navigator (Modernizr uses this practice)
                $("a").each(function() { // have to use an `each` here - either a jQuery `each` or a `for(...)` loop
                    var onClick; // this will be a function
                    var firstClick = function() {
                        $("a").trigger("JWUnhover"); // triggering hoverfix reset if any link gets touched

                        onClick = secondClick;
                        return false;
                    };
                    secondClick = function() {
                        onClick = firstClick;
                        return true;
                    };
                    onClick = firstClick;
                    $(this).click(function() {
                        return onClick();
                    });
                    $(this).bind('JWUnhover', function(){ onClick = firstClick; });
                });
            }
        });
    </script>
    <style type="text/css">
        a:hover {
            color:white;
            background:#FF00FF;
        }
    </style>
</head>
<body>
    <a href="http://google.ca">Google</a>
    <a href="http://stackoverflow.com">stackoverflow.com</a>
</body>
</html>
2
Julian F. Weinert

Cela a fonctionné pour moi!

// Ipad Navigation Hover Support
    $('#header .nav li a').bind('touchstart touchend', function(e) {
        if( $(this).attr("href") != "" ){
            window.location = $(this).attr("href");
        }

    });
1
crivers

Je ne connais aucun plugin jQuery pour faire une telle chose.

Vous ne pouvez pas déclencher une classe css psuedo telle que ": hover". Vous pouvez toutefois parcourir les éléments d'ancrage et ajouter une classe css ".hover" aux événements touchstart et touchend comme suit:

    var pageLinks = document.getElementsByTagName('a');
for(var i = 0; i < pageLinks.length; i++){
    pageLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
    pageLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

Pour ajouter un outil de reconnaissance des gestes au toucher, vous pouvez utiliser un plugin tel que: http://plugins.jquery.com/project/multiswipe

1
Willster

Il existe un moyen plus simple de résoudre le problème avec iOS et les états de survol, en utilisant CSS. Pour le lien que vous avez un problème avec définir la propriété cursor à pointer et l'état de survol sera ignoré sur iOS. Pour que tous les liens fonctionnent comme prévu, voir ci-dessous:

a
{cursor: pointer;}
0
daniel18387

Voici une version optimisée du code jQuery fourni par Richard JP Le Guen:

$(document).ready(function() {

    $('a').each(function() {

        var clicked = false;

        $(this).bind('click', function() {

            if(!clicked) return !(clicked = true);
        });
    });
});
0
DADU