1. Inicio
  2. Pregunta y respuesta
  3. Detección de clic con el botón derecho del mouse en forma de SVG en JavaScript no funciona

Detección de clic con el botón derecho del mouse en forma de SVG en JavaScript no funciona

2011-07-07 27 views
11


Necesito ayuda con mi script en el que me gustaría detectar el clic de RMB.
INFORMACIÓN: finalmente quiero mostrar mi propio menú contextual en una forma de SVG dedicada, que se muestra con el uso de Raphael js lib, descubrí que hay muchos ejemplos diferentes en la web, incluso los más simples para implementar , como con jQuery, pero tengo que ser capaz de detectar si se hizo clic en RMB o en cualquier otro.
He intentado (sin éxito en RMB) una tras la paz de código:Detección de clic con el botón derecho del mouse en forma de SVG en JavaScript no funciona

<html> 
<head> 
    <script type="text/javascript" src="raphael.js"></script> 
    <script> 
     window.onload = function() { 
      var paper = new Raphael(document.getElementById('canvas_container'), 300, 300); 
      var shape = paper.path('m150,150l40,0l0,20l-40,0l0,-20z'); 
      var fill=shape.attr({fill:'#FFFFFF'}); 
      fill.click(function (evt){ 
       if(evt.button == 2) { 
        // right mouse button pressed 
        evt.preventDefault(); 
       } 
       alert("Pressed mouse = " + evt.button.toString()); 
      }); 
     } 
    </script> 
</head> 

<!-- <BODY oncontextmenu="return false"> --> 
<body> 
    <div id="canvas_container"></div> 
</body> 
</html>


en IE sólo LMB (0) se detecta, en Chrome izquierda (0) y medio (1) y el menú de contexto por defecto se muestra, cuando lo desactivo dentro de la etiqueta del cuerpo (como comentado) el menú contextual no se muestra en absoluto, pero todavía no puedo recibir la alerta con RMB (2),

gracias por todos los consejos/asistencia, Borys

Fuente

2011-07-07 Borys

Respuesta

28

Parece que los elementos SVG no activan el evento "hacer clic" sino que se disparan "contextmenu" en el botón derecho. Estoy usando d3.js para unir los eventos, por lo que esta trabajado para mí:

.on("contextmenu", function(data, index) { 
    //handle right click 

    //stop showing browser menu 
    d3.event.preventDefault(); 
});

Fuente

2011-10-21 20:48:27

+0

En Chrome esto sigue siendo cierto a partir de hoy, la versión del 29.0.1547. ¡extraño! –

Cuestiones relacionadas

 Cuestiones relacionadas