Touch device, Single et Double Tapez sur Event handler jQuery / Javascript?

De fond:

Mon site est dans magento e-commerce open source de la solution, et sur le dessus (en-tête) il y a une icône du panier. Sur dekstop, lorsque l'utilisateur place le pointeur de la souris sur cette icône, il affiche le contenu (articles) dans le panier. Mais d'un clic sur cette icône, il dirige l'utilisateur vers la page panier.

Je veux:

Je veux avoir la possibilité, uniquement pour les appareils tactiles, que lorsqu'un utilisateur unique, appuyez sur l'icône, il doit afficher seulement le contenu, mais lorsque vous double cliquez sur l'icône, il devrait en tenir à la page du panier.

CODE HTML:

<div id="mini-cart" class="dropdown is-not-empty">

    <!-- This below div is always visible and on tap of this or either of it's any elements, required behaviour is expected -->
    <div class="dropdown-toggle cover" title="View Bag"> 
        <div class="feature-icon-hover">

            <a href="example.com/checkout/cart/" title="Shopping Bag">
                <span class="first close-to-text icon i-cart-wb force-no-bg-color">&nbsp;</span>
                <div class="hide-below-960">My Bag</div>
            </a>

            <div class="label amount">
                <a href="example.com/checkout/cart/" title="Shopping Bag">(1)</a>
            </div>

            <a class="summary" href="example.com/checkout/cart/" title="Shopping Bag">
                <span class="subtotal">
                    <span class="price">$28</span>
                </span>
            </a>
            <span class="caret">&nbsp;</span>

        </div> <!-- end: dropdown-toggle > div -->
    </div> <!-- end: dropdown-toggle -->

     <!-- This one is invisible by default, and needs to be shown on single tap -->
    <div class="dropdown-menu left-hand" style="display: none;">
          <!-- All THE CONTENT GOES HERE -->
    </div>
</div>

Ce que j'ai déjà essayé:

jQuery(function($){
        /* Code to detect the user agent, if mobile device then execute the code*/
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {

            //on single touch
            $("#mini-cart .dropdown-toggle").on('click', 'a', function(e){
                e.preventDefault();
                $("#mini-cart .dropdown-menu").show();
            });

            //on double touch
            $("#mini-cart .feature-icon-hover").find('a').dblclick(function(e){
                location.href = '/checkout/cart';
                //alert('dblclick');
            });
        }
    });

Ce code empêche de comportement par défaut sur un seul robinet, mais ne pas afficher le contenu de la div, lui aussi, ne pas faire n'importe quoi sur appuyez deux fois sur. En passant, je suis en train de tester sur samsung galaxy, pas sûr de savoir si c'est un bon appareil pour le test, et à l'aide de JQUERY PLUGIN (pas de jquery mobile).

source d'informationauteur atif

36

Si vous voulez cible mobile, alors vous pouvez utiliser touchstart qui est la touche équivalent de mousedown. si tactile capable navigateurs de bureau peut également utiliser ce donc peut-être que vous avez encore besoin de faire de l'user-agent de détection si cela ne vous convient pas. Dernière, j'ai vérifié, il n'y avait pas construit en "double tap" événement nous permet d'accrocher, mais nous pouvons rechercher manuellement un clic ou un double-tap. Le code devrait ressembler à quelque chose comme
```
var tapped=false
$("#mini-cart .dropdown-toggle").on("touchstart",function(e){
    if(!tapped){ //if tap is not set, set up single tap
      tapped=setTimeout(function(){
          tapped=null
          //insert things you want to do when single tapped
      },300);   //wait 300ms then run single click code
    } else {    //tapped within 300ms of last tap. double tap
      clearTimeout(tapped); //stop single tap callback
      tapped=null
      //insert things you want to do when double tapped
    }
    e.preventDefault()
});
```
Démo

Cela devrait fonctionner sur n'importe quel contact activé sur votre navigateur.

Une alternative, bien qu'un peu lourd juste pour cela est d'utiliser Hammer.js. C'est vraiment une très belle bibliothèque pour la manipulation des événements tactiles. Et il a aussi des agrégats de la souris et de la touche événements dans un seul type d'événement. Par exemple, appuyez sur et appuyez deux fois sur, il va essentiellement être
```
Hammer(el).on("tap", function() {
    //singletap stuff
});
Hammer(el).on("doubletap", function() {
    //doubletap stuff
});
```
Cela fonctionne aussi pour les événements de la souris, ce qui pourrait ne pas être ce que vous voulez. Et c'est un peu exagéré si c'est juste pour cela. Mais si vous envisagez de ne plus toucher les choses liées, je recommande l'utilisation de cette bibliothèque.

C'est le dernier code de travail qui a fait de la magie pour moi 🙂 j'ai juste copié et coller tout le code ici, mais on peut les utiliser conformément à leurs propres besoins.

   if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$('#dropdown_menu').css({ "right":'20%'});
var action;
$('#continue_shopping').show();
$('#continue_shopping').bind('touchstart click', function(event){
setTimeout(function(e){
$('#mini-cart').removeClass('open');
$('#dropdown_menu').hide();
}, 1200, [event]);
}); 
$('#dropdown-toggle').bind('touchstart', function(event){
var now = new Date().getTime();
var lastTouch = $(this).data('lastTouch') || now + 1 ;
var delta = now - lastTouch;
clearTimeout(action);
if(delta<500 && delta>0){
window.location='<?php echo $this->getUrl('checkout/cart');?>';
}else{
//if(delta == -1){
$('#mini-cart').addClass('open');
$('#dropdown_menu').show();
$(this).data('lastTouch', now);
action = setTimeout(function(e){
clearTimeout(action);  
}, 500, [event]);
}
$(this).data('lastTouch', now);
});
if (typeof document.body.ontouchstart == "undefined") {
$('#dropdown-toggle').bind('click', function(event){
var now = new Date().getTime();
var lastTouch = $(this).data('lastTouch') || now + 1 ;
var delta = now - lastTouch;
clearTimeout(action);
if(delta<600 && delta>0){
window.location='<?php echo $this->getUrl('checkout/cart');?>';
}else{
//if(delta == -1){
$('#mini-cart').addClass('open');
$('#dropdown_menu').show(); 
$(this).data('lastTouch', now);
action = setTimeout(function(e){
clearTimeout(action);  
}, 600, [event]);
}
$(this).data('lastTouch', now);
});
}
}

3

c'est mon hack. C'est un petit bloc de code, cela devrait bien fonctionner sur les téléphones portables. Il définit une horloge lorsque vous touchez quelque chose, puis il vérifie si le deuxième robinet est dans l'intervalle de temps (600ms dans cet exemple)
```
    //DOUBLE TAP
var timer = 0;
$(document).on("click" , "#target" , function() {
if(timer == 0) {
timer = 1;
timer = setTimeout(function(){ timer = 0; }, 600);
}
else { alert("double tap"); timer = 0; }
});
```

Vous devez vous connecter pour publier un commentaire.

Démo