¿Cómo puedo disparar un evento cuando hago clic derecho en un div dentro de un lienzo con jQuery?

ACTUALIZACIÓN: He actualizado el fragmento de código para incluir toda la página como se encuentra en Firebug.¿Cómo puedo disparar un evento cuando hago clic derecho en un div dentro de un lienzo con jQuery?

Tengo el siguiente código:

<html><head> 

<title>Welcome to CodeIgniter</title> 

<!--[if IE]> 
<script type="text/javascript" src="/assets/js/Jit/Extras/excanvas.js"></script> 
<![endif]--> 

<script src="/assets/js/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> 

<script src="/assets/js/Jit/jit.js" type="text/javascript"></script> 
<script src="/assets/js/tree.js" type="text/javascript"></script> 
<script src="/assets/js/jquery/jquery.rightClick.js" type="text/javascript"></script> 


<script type="text/javascript"> 

    $(document).ready(function() { 
     $(".node").rightClick(function() { 
      alert ("RIGHT CLICK"); 
     }); 

     $.getJSON("/ajax/fetch/tree", function(data) { 
      init(data); 
     }); 
    }); 

    $(".node").live("click", function() { 
     alert ($(this).attr("id")); 
    }); 


</script> 

<style type="text/css"> 
html, body { 
    width:100%; 
    height:100%; 
    background-color:#444; 
    text-align:center; 
    overflow:hidden; 
    font-size:9px; 
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; 
    margin:0;padding:0; 
} 
/* visualization style container */ 
#infovis { 
    background-color:#222; 
    position:relative; 
    width:900px; 
    height:500px; 
} 

a, a:link, a:visited { 
    color:#343439; 
} 
/* spacetree nodes CSS class */ 
.node { 
    background-color:transparent; 
    font-weight:bold; 
    overflow:hidden; 
    text-decoration:none; 
    position:absolute; 
    text-align:center; 
    padding:4px 1px 1px 1px; 
} 

.node:hover { 
    color:#393434; 
    } 

.hidden{ 
    display:none; 
} 
</style> 
</head><body> 

<div id="infovis"> 
    <div id="mycanvas" style="width: 900px; height: 500px; position: relative;"> 
     <canvas id="mycanvas-canvas" width="900" height="500" style="position: absolute; top: 0pt; left: 0pt; width: 900px; height: 500px;"></canvas> 
     <div id="mycanvas-label" style="overflow: visible; position: absolute; top: 0pt; left: 0pt; width: 900px; height: 0pt;"> 
      <div id="1" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 200px; top: 265px;">0.0</div> 
      <div id="4" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 420px; top: 215px;">2.0</div> 
      <div id="5" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 420px; top: 240px;">2.1</div> 
      <div id="9" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 420px; top: 265px;">2.2</div> 
      <div id="10" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 420px; top: 290px;">2.3</div> 
      <div id="2" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 310px; top: 253px;">1.0</div> 
      <div id="6" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 640px; top: 275px; display: none;">3.0</div> 
      <div id="3" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 310px; top: 278px;">1.1</div> 
      <div id="8" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 530px; top: 228px;">5.0</div> 
      <div id="11" class="node" style="position: absolute; width: 60px; height: 17px; cursor: pointer; color: rgb(51, 51, 51); font-size: 0.8em; text-align: center; padding-top: 3px; left: 530px; top: 253px;">5.1</div> 
     </div> 
    </div> 
</div> 
<div class="node">HELLO WORLD!</div> 
</body></html>

Quiero ser capaz de hacer clic derecho sobre uno de los divs con la clase "nodo" y luego disparar un evento. ¿Hay alguna manera de hacer esto con jQuery? He consultado el complemento jQuery del menú de contexto que se encuentra en http://www.javascripttoolbox.com/lib/contextmenu/. Sin embargo, si uso $ ('node'). ContextMenu (...) no funciona. Si uso $ ('infovis'). ContextMenu (...) el menú contextual funciona.

Parece que estos divs están realmente fuera del lienzo. Saqué este código directamente de Firebug.

Fuente

2010-06-24 Dan

Prueba esto:

$(document).ready(function(){ 
    $(document)[0].oncontextmenu = function() {return false;} 

    $("#infovis").delegate('.node','mousedown',function(e){ 
     if(e.button == 2) { 
     e.stopPropagation() 
     alert('Right mouse button!'); 
     return false; 
     } else { 
     return true; 
     } 

    }); 
});

Asumo #infovis es visible desde el principio y se utiliza JavaScript para poblar que div con divs .node. Por lo tanto, desea utilizar la delegación de eventos, por lo que no se vincula a cada nodo, sino que es un nodo padre en su lugar. Esto hace que su código sea más rápido, incluso si tiene 1000 .nodes. Además, no es necesario colocar los enlaces en una devolución de llamada.

Delegamos al mousedown y capturamos el evento si el botón == 2 (el botón de clic derecho).

También se desactiva el comportamiento predeterminado del clic derecho al detener el evento contextmenu.

Avísame si eso te funciona.

Fuente

2010-06-24 21:19:35 resopollution

Su recomendación funcionó para mí. – Dan

¿Has probado el plugin jquery.rightClick? Parece funcionar en una prueba rápida que hice:

http://abeautifulsite.net/blog/2008/05/jquery-right-click-plugin/

$('.node').rightClick(function() { 

    console.log('right click'); 

});

parece que es bastante viejo, pero de nuevo no hay mucho código allí. Creo que puede necesitar una pequeña actualización, pero no mucho.

Fuente

2010-06-24 20:03:29 user113716

He intentado esto, pero no funcionó para el "nodo" divs en mycanvas-label div. Puse un div en la parte inferior de la página que también tiene la clase "nodo" y el clic derecho funciona para ese. – Dan

@Dan - Copié y pegué su CSS, HTML y el código con la llamada 'rightClick', y funciona para mí en los elementos' .node' que están bajo '.mycanvas-label'. Probado en Firefox, Safari, IE7 e IE8. – user113716

@Dan - ¿Se cargan los elementos '.node' dentro de' .mycanvas-label' mediante la llamada a '$ .getJSON()'? Si es así, no funcionará a menos que llame a 'rightClick' sobre ellos dentro de la devolución de llamada' $ .getJSON() '. – user113716

prueba este código:

$("#infovis").delegate('.node', 'mousedown', function(e) { 
    if (e.button == 2) { 
     e.stopPropagation() 
     console.log(e.target.id); 
     console.log(e.target.textContent); 
     return false; 
    } else { 
     return true; 
    } 

});`

e.target rendimiento total del div que contiene class = "node"

e.taget.textcontext retorno nombre del nodo que está en div elemento

Fuente

2016-09-12 14:13:35 hossein

¿Cómo puedo disparar un evento cuando hago clic derecho en un div dentro de un lienzo con jQuery?

Respuesta

Cuestiones relacionadas