Me gustaría deshabilitar el menú contextual que aparece después de un toque prolongado (tocar y mantener) en las imágenes en mi aplicación web. He visto publicaciones con diferentes ideas de cómo hacerlo, pero ninguna de ellas parece funcionar para mí.Deshabilitar el menú contextual en pulsaciones largas en Android
¿Hay alguna manera de hacer esto en Android a través de HTML/CSS/Javascript?
Esto debería funcionar en 1.6 o posterior (si no recuerdo mal). 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>
<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 falso en el controlador de eventos.
También puede capturar el evento click y comprobar qué botón del mouse disparó el evento con event.button, en algunos navegadores de todos modos.
Lo sentimos, pero estos dos métodos no funcionan en Android. El evento oncontextmenu nunca se activa y el evento click aún no se activa cuando el usuario está manteniendo presionado el elemento. –
A través de javascript en bruto no hay eventos que se llaman para el menú contextual. Tal vez en el mundo de Java haya algo ... En realidad, hay varios problemas con respecto a los eventos de JavaScript (como el enfoque que no funciona bien) en el juego web de Android.
Sí, estoy de acuerdo. Como he desarrollado una biblioteca JavaScript que se usará dentro de un navegador, el uso de Java no es una opción para mí. –
Utilizo el ejemplo completo de Nurik pero el elemento (una imagen de entrada en mi página) se deshabilitó también para el clic.
cambio la línea original por esto:
línea original:
node.ontouchstart = absorbEvent_;
mi cambio:
node.ontouchstart = node.onclick;
con este approuch desactivo el pop-up guardar un menú de imagen en logpress pero mantén el evento click.
pruebas Estoy en una tableta de 7" con Android 2.2 bajo un navegador Dolphin HD y funciona bien!
Para mí, absorbiendo todos los eventos no era una opción ya que se quiere desactivar las descargas de prensa mucho tiempo todavía . que permite al usuario hacer zoom y panorámica en la imagen yo era capaz de resolver esto con CSS y hTML solamente por capas de un div "escudo" 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;
}
Esperamos que esto ayude a alguien
!Utilice estos códigos CSS para el teléfono móvil
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
Esto no funciona para el navegador solicitado, chrome. – bbsimonbb
El menú contextual tiene su propio evento. Solo necesitas atraparlo y evitar que se propague.
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
¡Señor necesita más votos favorables! Esta es la única solución que funcionó para mí después de probar tantas soluciones sugeridas. –
aseado, funciona como un encanto. –
debería ser la respuesta aceptada. ¡Muchas gracias! –
que se pueden hacer using CSS:
img {
pointer-events: none;
}
acaba de tener un problema similar. Las sugerencias anteriores no me funcionaron en el navegador Andoid, pero descubrí que mostrar la imagen problemática como una imagen de fondo de CSS en lugar de una imagen incrustada solucionó 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;
por favor agregue alguna descripción que explique la respuesta. – jjj
No se ha visto nada del OP desde el 8 de agosto, así que decidí probarlo yo mismo usando el SDK. Probé 1.5, 1.6 y 2.2 y funcionó bien para todos ellos, así que estoy feliz de otorgar la recompensa ahora sin esperar a que el OP confirme. +1 para una buena respuesta, también. –
Roman, muchas gracias por su respuesta. Necesito probarlo (no es que ignore la prueba de Andy, pero he visto muchas cosas que funcionan bien con el SDK y luego fallan en los dispositivos reales). Lamento tomar tanto tiempo para responder, pero prometo probar esto antes del fin de semana. ¡Gracias de nuevo a ti y a Andy! –
@Andy - gracias, @Roy - algo seguro; Probé en un Nexus One, recomendaría probar en dispositivos con navegadores predeterminados no estándar también, @Tegeril: ¡hace tiempo que no se ve! –