web-dev-qa-db-fra.com

Désactivation du menu contextuel lorsque vous appuyez longtemps sur Android

Je souhaite désactiver le menu contextuel qui apparaît après un appui long sur les images de mon application Web. J'ai vu des articles avec différentes idées sur la façon de le faire, mais aucun ne semble fonctionner pour moi.

Existe-t-il un moyen de faire cela sur Android via HTML/CSS/Javascript?

javascriptandroidmobile-webkit
47
Roy Sharon

Cela devrait fonctionner sur 1.6 ou plus tard (si je me souviens bien). Je ne crois pas qu'il y ait une solution de contournement pour 1.5 ou plus tôt.

<!DOCTYPE html>
<html>
<head>
  <script>
    function absorbEvent_(event) {
      var e = event || window.event;
      e.preventDefault && e.preventDefault();
      e.stopPropagation && e.stopPropagation();
      e.cancelBubble = true;
      e.returnValue = false;
      return false;
    }

    function preventLongPressMenu(node) {
      node.ontouchstart = absorbEvent_;
      node.ontouchmove = absorbEvent_;
      node.ontouchend = absorbEvent_;
      node.ontouchcancel = absorbEvent_;
    }

    function init() {
      preventLongPressMenu(document.getElementById('theimage'));
    }
  </script>
</head>
<body onload="init()">
  <img id="theimage" src="http://www.google.com/logos/arthurboyd2010-hp.jpg" width="400">
</body>
</html>
30
Roman Nurik

Le menu contextuel a son propre événement. Vous devez juste l'attraper et l'empêcher de se propager. 

window.oncontextmenu = function(event) {
     event.preventDefault();
     event.stopPropagation();
     return false;
};
125
bbsimonbb

Pour moi, absorber tous les événements n'était pas une option, car je voulais désactiver les téléchargements sur la presse longue tout en permettant à l'utilisateur de zoomer et de faire un panoramique sur l'image. J'ai été capable de résoudre ce problème avec CSS et HTML uniquement en superposant un div "shield" au-dessus de l'image, comme ceci:

<div class="img-container">
  <div class="shield"></div>
  <img src="path.jpg">
</div>

img {
    max-width: 100%;
}

.shield {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

J'espère que cela aide quelqu'un!

8
Brian FitzGerald

J'utilise l'exemple complet de Nurik mais l'élément (une image d'entrée dans ma page) était également désactivé pour le clic.

Je change la ligne d'origine par ceci:

ligne d'origine:

node.ontouchstart = absorbEvent_;

mon changement:

node.ontouchstart = node.onclick;

avec cette option, je désactive le menu contextuel de sauvegarde des images sur logpress, mais conserve l'événement click.

Je teste sur une tablette 7 "avec Android 2.2 sous un navigateur Dolphin HD et fonctionne bien!

5
GAL

Cela peut être fait en utilisant CSS :

img {
  pointer-events: none;
}
5
Artem Andreev

Utiliser ce code CSS pour mobile

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
3
vitralyoz
pointer-events: none; // for Android

-webkit-touch-callout: none; // for iOS

-webkit-user-select: none; 

-khtml-user-select: none; 

-moz-user-select: none; 

-ms-user-select: none; 

user-select: none;
0
soonsuweb

Je viens d'avoir un problème similaire. Les suggestions ci-dessus ne fonctionnaient pas pour moi dans le navigateur Andoid, mais j’ai constaté que l’affichage de l’image problématique en tant qu’image de fond CSS plutôt qu’une image incorporée corrigeait le problème.

0
Richard B

J'ai eu un problème similaire. J'ai essayé quelques solutions de ce fil et un autre fil pour Safari sur le même problème ( Empêcher le menu contextuel par défaut sur Longpress/LongClick dans Safari mobile (iPad/iPhone) ). La mauvaise partie était que je ne pouvais pas utiliser onTouchStart, onTouchEnd etc ...

Empêcher que l'événement de onContextMenu. Extrait de React 16.5.2. Testé en chrome uniquement. 

    <img {...props} onContextMenu={event => event.preventDefault()}
    onTouchStart={touchStart}
    onTouchEnd={touchEnd} />

J'espère que ça aide quelqu'un. À votre santé!

0
Vlad Ilie
<a id="moo" href=''> </a>

<script type="text/javascript">
    var moo = document.getElementById('moo');

    function handler(event) {
        event = event || context_menu.event;

        if (event.stopPropagation)
            event.stopPropagation();

        event.cancelBubble = true;
        return false;
    }

    moo.innerHTML = 'right-click here';

    moo.onclick = handler;
    moo.onmousedown = handler;
    moo.onmouseup = handler;
</script>

Capturez l'événement onContextMenu et retournez false dans le gestionnaire d'événements.

Vous pouvez également capturer l'événement click et vérifier quel bouton de la souris a déclenché l'événement avec event.button, dans certains navigateurs.

0
Hare-Krishna