Píldoras jQuery VI – Un menú contextual

En el capítulo anterior vimos, de manera general y con un par de ejemplos, cómo tratar eventos de teclado y de ratón. En este post vamos  a seguir con esta temática.

Uno de las características más comunes en las aplicaciones web es la aparición de un menú contextual cuando pulsamos el botón derecho del ratón. No es algo complicado pero debemos de tener en cuenta que, por defecto, se nos mostrará el menú contextual del propio navegador. Tomemos como ejemplo el siguiente ejemplo de código:

See the Pen jQuery (Capturing mouse right click but showing browser’s context menu) by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Podría pensarse que al capturar el evento con código 3 es nuestro menú el que se va a mostrar, pero no, prevalece el menú contextual del navegador. Para evitar eso podemos optar por lo siguiente (hay muchas más posibilidades de hacerlo):

 

See the Pen jQuery (How to show a context menu in the right way) by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Las claves de que funcione se encuentran en los siguiente apartados:

  • Capturo el evento contextmenu en vez de click
  • Hago un return false para que ese evento no se tratado por el navegador (sería lo mismo si hiciera primero event.prevendefault() y event.stopPropagation() )

Y esto es todo…muy sencillo pero en un principio el funcionamiento del navegador puede desconcertar. En el próximo post repasaremos los selectores jQuery, uno de los elementos más importantes si queremos dominar esta tecnología.

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Un pensamiento en “Píldoras jQuery VI – Un menú contextual

  1. Pingback: Píldoras jQuery V – El objeto evento | Juan Diego Pérez – Pekechis

Los comentarios están cerrados.