¿Quieres registrarte?

Reemplazar y bloquear click derecho con Javascript

Por: joarobles
8 de Diciembre del 2008

Les presento un script muy sencillo mediante el cual pueden reemplazar el menú contextual predeterminado de su navegador por uno personalizado con opciones a su gusto, ideal para aplicaciones web o simplemente para complicar el "Guardar imagen como...". Además les dejo un par de funciones extra para implementar. Por ejemplo, agregar el botón copiar y pegar accediendo al ClipBoard.

Se implementa de la siguiente forma en cualquier parte del HTML donde cambiarás el menú del click derecho:

Código :

<div id="menu" style="visibility:hidden; position:absolute;">
   <div class="opcion" onclick="javascript:funcion();">Mi funcion</div>
   <div class="opcion" onclick="javascript:funcion();">Mi funcion</div>
   <div class="opcion" onclick="javascript:funcion();">Mi funcion</div>
   <div><hr /></div>
   <div class="opcion" onclick="javascript:funcion();">Mi funcion</div>
</div>


Habiendo incluido los archivos de estilo CSS y menuContextual.js.

Aquí pueden verlo funcionando.

Es sólo una base. Espero que les sirva para desarrollarlo un poco más.
¡Saludos!

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas javascript hack html usabilidad

Comentarios | Enviar un comentario
Muy bueno :D
Por: drarock
gracias!
ahora estoy trabajando en hacerlo un poco más automatico... o ver de poder crearlo con una funcion e implementar un listener para las acciones... no sé, iré desarrollandolo y los tendré al tanto!
Por: joarobles
la verdad no me gusta mucho que digamos la idea de meterse con el el menu contextual del usuario, lo encuentro sumamente invasivo
aunque hacer esto es una mala practica(a mi parecer) común http://www.google.com/search?q=menu+contextual+javascript
Por: Inyaka
Yo creo que sólo hay que saber donde usarlo, yo tambien estoy de acuerdo en parte con Inyaka, pero esta idea es para ser usada mas en aplicaciones web diria yo, por ejemplo tanto yahoo como hotmail, el click derecho de la grilla es para acciones sobre el mail seleccionado, y eso si me parece nice :)
Por: drarock
estas en lo cierto, depende mucho de para que se ocupe, de todos modos
usese con discreción y solo donde sea estrictamente necesario.

y de todos modos felicitaciones por el tip, este o no en acuerdo, me parece bien que quieras aportar a la comunidad
Por: Inyaka
Sí, a nivel de aplicaciones web, esto en ocasiones puede ser útil. Google Docs restringe el click derecho para mostrar un menú contextual acorde con una aplicación de oficina. Así que puede servir.
Por: Freddie

ideal para aplicaciones web


por eso lo escribí en mi primer post... la verdad concuerdo totalmente con ustedes, en cuanto a lo invasivo pero lo pensé más bien al estilo menu contextual de Google Docs,

Sí, a nivel de aplicaciones web, esto en ocasiones puede ser útil. Google Docs restringe el click derecho para mostrar un menú contextual acorde con una aplicación de oficina. Así que puede servir.

en fin, para extender la funcionalidad de las opciones del contexto.... igualmente puede ser mal usado, con solo poner este script y el DIV "menu" vacio estaríamos eliminando cualquier posibilidad de menu contextual...
saludos!!!
Por: joarobles
disculap pero soy demo nuevo e nesto y nose donde tengo que colocar ese codigo me puedes decir? alguien q me qyude seria tan amable
Por: ?¿?-blog
Amigo, lo siento no funciona en el navegador opera..
Por: Dookie-blog
es cierto, Opera no permite la implementacion de esos metodos para trabajar con los eventos del mouse... fijate que ni en el Google Docs se puede...
ahora está arreglado para que funcione en IE también...
avisen cualquier cosa!
Por: joarobles
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.