web-dev-qa-db-fra.com

fonction document .click pour périphérique tactile

J'ai un sous-navigateur qui fonctionne à l'aide de jQuery - un utilisateur clique sur l'élément de liste de niveau supérieur, par exemple "services", ce qui déclenche le menu déroulant. La liste déroulante bascule en cliquant sur le lien «service». J'ai fait en sorte qu'un utilisateur puisse cliquer n'importe où sur l'écran pour basculer la liste déroulante vers un état fermé. Mais comme le site est réactif, je veux que l'utilisateur puisse cliquer (toucher) n'importe où sur l'écran pour fermer la liste déroulante, mais le problème est que cela ne fonctionne pas sur les appareils tactiles. 

Ma configuration code ive pour le clic sur le document est la suivante:

$(document).click(function(event) { 

  if ( $(".children").is(":visible")) {
    $("ul.children").slideUp('slow');
  }

});

Je suppose que document.click risque de ne pas fonctionner sur les appareils tactiles. Sinon, quelles solutions pour obtenir le même effet?

Merci

jquerycss
54
Doidgey

Pour déclencher la fonction avec click ou touch, vous pouvez changer ceci:

$(document).click( function () {

Pour ça:

$(document).on('click touchstart', function () {

Ou ca:

$(document).on('click touch', function () {

L'événement touchstart se déclenche dès qu'un élément est touché. L'événement touch ressemble davantage à un "tap", c'est-à-dire un contact unique à la surface. Vous devriez vraiment essayer chacun de ceux-ci pour voir ce qui fonctionne le mieux pour vous. Sur certains appareils, touch peut être un peu plus difficile à déclencher (ce qui peut être une bonne ou une mauvaise chose - cela empêche le comptage d'une traînée, mais une petite traînée accidentelle peut empêcher son déclenchement).

142
Fenton

touchstart ou touchend ne sont pas bons, parce que si vous faites défiler la page, l'appareil fait des choses . Donc, si je veux fermer une fenêtre avec tap ou cliquez en dehors de l'élément et faites défiler la fenêtre, j'ai fait:

$(document).on('touchstart', function() {
    documentClick = true;
});
$(document).on('touchmove', function() {
    documentClick = false;
});
$(document).on('click touchend', function(event) {
    if (event.type == "click") documentClick = true;
    if (documentClick){
        doStuff();
    }
 });
38
ale

pouvez-vous utiliser jqTouch ou jquery mobile ? là, il est beaucoup plus facile de gérer les événements tactiles . Sinon, vous devez simuler un clic sur un périphérique tactile, suivez les articles suivants:

iphone-touch-events-in-javascript

Une démo tactile

Plus dans ce fil

4
SSA

Pour l'appliquer partout, vous pouvez faire quelque chose comme

$('body').on('click', function() {
   if($('.children').is(':visible')) {
      $('ul.children').slideUp('slow');
   }
});
2
jezza-tan

Comme indiqué ci-dessus, utiliser 'click touchstart' donnera le résultat souhaité. Si vous console.log(e) vos clics, vous constaterez peut-être que lorsque jquery reconnaît toucher, vous obtenez un clic - vous obtiendrez 2 actions à partir de click et touchstart. La solution ci-dessous a fonctionné pour moi.

//if its a mobile device use 'touchstart'
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    deviceEventType = 'touchstart'
} else {
//If its not a mobile device use 'click'
    deviceEventType = 'click'
}

$(document).on(specialEventType, function(e){
    //code here
});
1
Aaron Shier

la réponse approuvée n'inclut pas le retour essentiel false pour empêcher touchstart d'appeler click si click est implémenté, ce qui entraîne l'exécution du gestionnaire twoce.

faire:

$(btn).on('click touchstart', e => { 
   your code ...
   return false; 
});
0
kofifus