web-dev-qa-db-fra.com

Empêcher le menu contextuel par défaut lors d'un appui long/long clic dans Safari mobile (iPad/iPhone)

Pour un site Web, je souhaite afficher un menu contextuel personnalisé lorsqu'un utilisateur "appuie longuement" sur l'écran. J'ai créé un écouteur jQuery Longclick dans mon code pour afficher un menu contextuel personnalisé. Le menu contextuel est affiché, mais le menu contextuel par défaut de l'iPad est également affiché! J'ai essayé d'éviter cela en ajoutant un preventDefault() à l'événement dans mon auditeur, mais cela ne fonctionne pas:

function showContextMenu(e){
  e.preventDefault();
  // code to show custom context menu
}

$("#myId").click(500, showContextMenu);

Des questions

  1. Pouvez-vous empêcher l'affichage du menu contextuel par défaut de l'iPad?
  2. Peut-on le faire en utilisant le plugin jQuery Longclick?

Le plugin Longclick a un traitement spécifique pour l'iPad (en supposant par cet extrait de son code source ):

if (!(/iphone|ipad|iPod/i).test(navigator.userAgent)){
  $(this)
  .bind(_mousedown_, schedule)
  .bind([_mousemove_, _mouseup_, _mouseout_, _contextmenu_].join(' '), annul)
  .bind(_click_, click)
}

Donc, je suppose que cela répond à ma deuxième question (en supposant que le plugin utilise le bon événement).

javascriptjqueryiphoneipadmobile-safari
28
Jasper de Vries

Merci à JDandChips pour la pointe moi à la solution. Cela fonctionne parfaitement en combinaison avec le plugin longclick. Par souci de documentation, je posterai ma propre réponse pour montrer ce que j'ai fait.

HTML:

<script type="text/javascript"
        src="https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js"></script>

<p><a href="http://www.google.com/">Longclick me!</a></p>

Le Javascript était déjà OK:

function longClickHandler(e){
  e.preventDefault();
  $("body").append("<p>You longclicked. Nice!</p>");
}

$("p a").longclick(250, longClickHandler);

Le correctif consistait à ajouter ces règles à la feuille de style:

body { -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }

Menu contextuel désactivé exemple .

Update: le plugin jQuery Longclick semble fonctionner uniquement dans Safari sur iPad, pas dans Google Chrome! Je suis en train de regarder ça pour le moment.

Update 2: j'ai intégré le code Javascript Longclick dans la source du Fiddle, car l'erreur suivante apparaissait dans Chrome (en raison de https):

Refusé d'exécuter le script à partir de ' https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js ' car son type MIME ('text/plain') n'est pas exécutable et la vérification de type MIME stricte est activée.

Voir la version mise à jour: http://jsfiddle.net/z9ZNU/53/

24
Jasper de Vries
<style type="text/css">
*:not(input):not(textarea) {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}       
</style>

Si vous voulez désactiver uniquement la balise du bouton d'ancrage, utilisez ceci:

a {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}
14
Narsingh Tomar

Une solution rapide en CSS:

html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

la sélection de l'utilisateur désactive la mise en évidence du texte/des zones.
touch-callout désactive le menu contextuel.

8
Federico

Je n'ai pas d'iPad, donc je n'ai pas pu tester de solution, mais je suis tombé sur une question similaire, qui a été résolue. Je ne sais pas si cela vous aidera, mais voici le lien: Comment désactiver le comportement par défaut d'un ancre dans jQuery Mobile (iOS)

2
JDandChips

Il n'est pas nécessaire de s'appuyer sur les propriétés -webkit-.

Si votre lien est un appel Javascript, il vous suffit de supprimer complètement la href="void(0)"! Vos attributs ontouchend ou onclick continueront de fonctionner. Si vous voulez que le lien paraisse original, ajoutez ce css:

a .originalLink { color: blue; text-decoration: underline; cursor: pointer; }

Cela fonctionnera beaucoup plus facilement, surtout quand il y a des centaines de liens dans la page.

Vous pouvez également étendre cela aux "vrais" liens de page au détriment de la perte de référencement:

<a class="originalLink" onclick="location.href='http://mylink';">Real URL Link</a>

Ce n'est pas vraiment une bonne pratique pour la plupart des sites Web, mais cela peut être crucial pour une situation spécifique adaptée aux mobiles (application web mobile).

Bonne codage!

1
Aaron Gillion

Ce dépôt github fonctionne pour moi. Dans mon cas, j'écris une application iPad en utilisant UIWebView.

https://github.com/vaidik/jquery-longpress

0
Dody Rachmat Wicaksono