Comment simuler un vol stationnaire avec une touche en contact navigateurs compatibles?

OK, j'ai fait le! Il implique de modifier le CSS légèrement et ajouter de la JS.

À l'aide de jQuery pour le rendre facile:

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

En anglais: lorsque vous démarrez ou à la fin d'une touche, tournez la classe hover_effect sur on ou off.

Puis, dans votre HTML, ajouter une classe hover pour tout ce que vous voulez que cela fonctionne avec. Dans votre CSS, remplacer n'importe quelle instance de:

element:hover {
    rule:properties;
}

avec

element:hover, element.hover_effect {
    rule:properties;
}

Et seulement pour l'ajout de l'utilité, de l'ajouter à votre CSS ainsi:

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

Pour arrêter le navigateur vous demandant de copier/sauvegarder/sélectionnez l'image ou quoi que ce soit.

Facile!

Essayez ceci:

<script>
document.addEventListener("touchstart", function(){}, true);
</script>

Et dans votre CSS:

element:hover, element:active {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none /*only to disable context menu on long press*/
}

Avec ce code, vous n'avez pas besoin d'un supplément .placez la classe!

Encore Améliorée De La Solution De

D'abord, je suis allé avec le Riche Bradshaw approche de la, mais alors les problèmes ont commencé à apparaître. En faisant le e.preventDefault() sur 'évènements touchstart' événement, la page n'est plus des parchemins et des, ni le long de la presse est en mesure de tirer le menu options, ni double-cliquez sur le zoom est en mesure de terminer l'exécution.

Une solution pourrait être de trouver l'événement qui est appelé et juste e.preventDefault() dans l'autre, 'touchend'. Depuis défilement 'touchmove' vient avant 'touchend' il reste que, par défaut, et 'cliquez sur' est également empêché, car il vient par la suite dans le cas de la chaîne appliquée à la téléphonie mobile, comme suit:

//Binding to the '.static_parent' ensuring dynamic ajaxified content
$('.static_parent').on('touchstart touchend', '.link', function (e) {

    //If event is 'touchend' then...
    if (e.type == 'touchend') {
        //Ensuring we event prevent default in all major browsers
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }

    //Add class responsible for :hover effect
    $(this).toggleClass('hover_effect');
});

Mais ensuite, lorsque les options de menu s'affiche, il ne tire plus 'touchend' responsable de la désactivation de la classe, et la prochaine fois hover comportement sera dans l'autre sens, totalement mélangés.

Une solution serait alors, de nouveau, à condition de trouver l'événement qui nous sommes, ou tout simplement faire distinctes, et l'utilisation addClass() et removeClass() respectivement sur 'évènements touchstart' et 'touchend', en veillant à toujours commence et se termine par, respectivement, l'ajout et la suppression la place des personnes de décider sur elle. Pour finir nous nous lie également le retrait de rappel à la 'focusout' type d'événement, en restant responsable de la compensation d'un lien du survol du classe qui pourrait rester et ne jamais revisité à nouveau, comme suit:

$('.static_parent').on('touchstart', '.link', function (e) {
    $(this).addClass('hover_effect');
});

$('.static_parent').on('touchend focusout', '.link', function (e) {
    //Think double click zoom still fails here
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
    $(this).removeClass('hover_effect');
});

Attention: les Quelques bugs encore se produire dans les deux solutions précédentes et, pense aussi (pas testé), double-cliquez sur zoom échoue encore trop.

De rangement, et Espérons-le, sans Bug (pas :)) Javascript Solution

Maintenant, pour une seconde, plus propre, plus propre et réactive, l'approche de la juste utilisation de javascript (pas de mélange entre les deux .passez de classe et pseudo :hover) et à partir d'où vous pouvez appeler directement votre ajax comportement sur l'universel (mobile et desktop) 'cliquez sur' cas, j'ai trouvé assez bien répondu à la question à partir de laquelle j'ai enfin compris comment je pouvais mélanger les toucher et les événements de la souris sans plusieurs rappels d'événement inévitablement changer les uns des autres jusqu'à l'événement de la chaîne. Voici comment:

$('.static_parent').on('touchstart mouseenter', '.link', function (e) {
    $(this).addClass('hover_effect');
});

$('.static_parent').on('mouseleave touchmove click', '.link', function (e) {
    $(this).removeClass('hover_effect');

    //As it's the chain's last event we only prevent it from making HTTP request
    if (e.type == 'click') {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        //Ajax behavior here!
    }
});

Ajouter ce code et ensuite définir la classe "tapHover" à des éléments qui vous aimeriez travailler de cette façon.
La première fois que vous appuyez sur un élément qu'il aura gain de pseudoclass ":hover" et de classe "tapé". Cliquez sur l'événement en sera empêché.
Deuxième fois que vous appuyez sur le même élément - cliquez sur l'événement sera déclenché.

JS:

//Activate only in devices with touch screen
if('ontouchstart' in window)
{
    //this will make touch event add hover pseudoclass
    document.addEventListener('touchstart', function(e) {}, true);

    //modify click event
    document.addEventListener('click', function(e) {
        //get .tapHover element under cursor
        var el = jQuery(e.target).hasClass('tapHover')
            ? jQuery(e.target)
            : jQuery(e.target).closest('.tapHover');

        if(!el.length)
            return;

        //remove tapped class from old ones
        jQuery('.tapHover.tapped').each(function() {
            if(this != el.get(0))
                jQuery(this).removeClass('tapped');
        });

        if(!el.hasClass('tapped'))
        {
            //this is the first tap
            el.addClass('tapped');
            e.preventDefault();
            return false;
        }
        else
        {
            //second tap
            return true;
        }
    }, true);
}

CSS:

.box {
	float:		left;
	
	display:	inline-block;
	margin:		50px 0 0 50px;
	width:		100px;
	height:		100px;
	overflow:	hidden;
	
	font-size:	20px;
	
	border:		solid 1px black;
}
.box.tapHover {
	background:	yellow;
}
.box.tapped {
	border:		solid 3px red;
}
.box:hover {
	background:	red;
}

HTML:

<div class="box" onclick="this.innerHTML = Math.random().toFixed(5)"></div>
<div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div>
<div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div>

Une façon de le faire serait de faire du vol stationnaire effet lorsque la touche démarre, puis retirez le hover effet lorsque le contact se déplace ou se termine.

C'est ce que Apple a à dire à propos de le toucher de la manipulation en général, puisque vous parler de l'iPhone.

Un mélange de natif Javascript et jQuery:

var gFireEvent = function (oElem,sEvent) 
{
 try {
 if( typeof sEvent == 'string' && o.isDOM( oElem ))
 {
  var b = !!(document.createEvent),
     evt = b?document.createEvent("HTMLEvents"):document.createEventObject();
  if( b )    
  {  evt.initEvent(sEvent, true, true ); 
    return !oElem.dispatchEvent(evt);
  }
  return oElem.fireEvent('on'+sEvent,evt);
 }
 } catch(e) {}
 return false;
};


//Next you can do is (bIsMob etc you have to determine yourself):

   if( <<< bIsMob || bIsTab || bisTouch >>> )
   {
     $(document).on('mousedown', function(e)
     {
       gFireEvent(e.target,'mouseover' );
     }).on('mouseup', function(e)
     {
       gFireEvent(e.target,'mouseout' );
     });
   }

Utilisation peut utiliser les CSS trop, ajouter de l'accent et de l'actif (pour IE7 et moins) pour le lien caché. Exemple de menu ul à l'intérieur d'un div avec la classe menu:

.menu ul ul {display:none; position:absolute; left:100%; top:0; padding:0;}
.menu ul ul ul {display:none; position:absolute; top:0; left:100%;}
.menu ul ul a, .menu ul ul a:focus, .menu ul ul a:active { width:170px; padding:4px 4%; background:#e77776; color:#fff; margin-left:-15px; }
.menu ul li:hover > ul { display:block; }
.menu ul li ul li {margin:0;}

Il est tard et non-testés, devrait fonctionner 😉