Deshabilitar el menú contextual de largos toques en Android
Me gustaría deshabilitar el menú contextual que aparece después de un largo toque (tocar y mantener) en las imágenes de mi aplicación web. He visto posts con diferentes ideas de cómo hacerlo, pero ninguno de ellos parece funcionar para mí.
¿Hay una manera de hacer esto en Android vía HTML / CSS / Javascript?
- Android 2.2 2.3 solución para la consulta de medios de ancho de dispositivo
- Webkit para Android: Los elementos con posicionamiento absoluto no respetan el índice z
- -webkit-tap-highlight-color no se aplica a la etiqueta de área
- ANDROID WEBKIT: ¡Selecciona los elementos que obtienen eventos de enfoque, pero no se abren!
- Los elementos de entrada en android 4.x no se pueden diseñar cuando se enfocan
- Desarrollo de sitios específicos para móviles. ¿Donde empezar?
- deshabilitar la descarga de imágenes en el navegador android
- Meta Tag "apple-mobile-web-app-able" para Android?
- El navegador de Android 2.3 falla al renderizar algunas transformaciones CSS3 2D
Esto debería funcionar en 1.6 o más tarde (si recuerdo bien). No creo que haya una solución para 1.5 o anterior.
<!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> El menú contextual tiene su propio evento. Sólo tienes que atraparlo y evitar que se propague.
window.oncontextmenu = function(event) { event.preventDefault(); event.stopPropagation(); return false; };
Para mí, la absorción de todos los eventos no era una opción, ya que quería desactivar las descargas de prensa larga, mientras que todavía permite al usuario el zoom y pan en la imagen. Yo era capaz de resolver esto con css y html sólo por capas de un "escudo" div en la parte superior de la imagen así:
<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; }
Espero que esto ayude a alguien!
Utilizo el ejemplo completo de Nurik pero el elemento (una imagen de entrada en mi página) fue desactivado para el clic también.
Cambie la línea original por esto:
Línea original:
node.ontouchstart = absorbEvent_;
Mi cambio:
node.ontouchstart = node.onclick;
Con este approuch deshabilito el menú emergente de la imagen de la reserva en logpress pero guardo el acontecimiento del tecleo.
Estoy probando en una tableta de 7 "con Android 2.2 bajo un navegador Dolphin HD y funciona bien!
Utilice estos códigos CSS para móviles
-webkit-touch-callout: none; -webkit-user-select: none; /* Disable selection/copy in UIWebView */
Eso se puede hacer usando CSS :
img { pointer-events: none; }
<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>
Capture el evento onContextMenu y devuelva false en el controlador de eventos.
También puede capturar el evento de clic y comprobar qué botón del ratón disparó el evento con event.button, en algunos navegadores de todos modos.
Sólo tenía un problema similar. Las sugerencias anteriores no funcionaron para mí en el navegador Andoid, pero encontré que mostrar la imagen problemática como una imagen de fondo CSS en lugar de una imagen incrustada arregló el problema.
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;
A través de javascript en bruto no hay eventos que se llaman para el menú contextual. Tal vez en el mundo Java hay algo … En realidad hay varios temas relacionados con los eventos de JavaScript (como el enfoque no funciona bien) en el webkit de Android.