Wie kann ich ein Ereignis auslösen, wenn ich mit der rechten Maustaste auf ein div in einer Leinwand mit jQuery klicke

UPDATE: Ich habe das Code-Snippet aktualisiert, um die gesamte Seite wie in Firebug enthalten.Wie kann ich ein Ereignis auslösen, wenn ich mit der rechten Maustaste auf ein div in einer Leinwand mit jQuery klicke

Ich habe den folgenden Code:

<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>

Ich möchte auf einen der divs mit der „Knoten“ Klasse klicken nach rechts zu können und dann ein Ereignis ausgelöst. Gibt es eine Möglichkeit, dies mit jQuery zu tun? Ich habe das Kontextmenü jQuery-Plugin bei http://www.javascripttoolbox.com/lib/contextmenu/ gefunden. Wenn ich jedoch $ ('node'). ContextMenu (...) verwende, funktioniert es nicht. Wenn ich $ ('infovis'). ContextMenu (...) verwende, funktioniert das Kontextmenü.

Es sieht so aus, als wären diese divs tatsächlich außerhalb der Zeichenfläche. Ich habe diesen Code direkt von Firebug gezogen.

Quelle

2010-06-24 Dan

Try this:

$(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; 
     } 

    }); 
});

Ich gehe davon aus #infovis ist von Anfang an sichtbar und Sie Javascript verwenden, das div mit .Node divs zu füllen. Daher möchten Sie die Ereignisdelegierung verwenden, sodass Sie nicht für jeden Knoten, sondern für einen übergeordneten Knoten gebunden sind. Dies macht Ihren Code schneller, selbst wenn Sie 1000 Knoten haben. Außerdem müssen Sie die Bindungen nicht in einen Rückruf einfügen.

Wir delegieren zu mousedown und erfassen das Ereignis wenn button == 2 (die rechte Maustaste).

Sie deaktivieren auch das Standard-Rechtsklickverhalten, indem Sie das Kontextmenü-Ereignis anhalten.

Lassen Sie mich wissen, ob das für Sie funktioniert.

Quelle

2010-06-24 21:19:35 resopollution

Ihre Empfehlung hat bei mir funktioniert. – Dan

Haben Sie das jquery.rightClick-Plugin ausprobiert? Scheint auf einen schnellen Test zu arbeiten ich getan habe:

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

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

    console.log('right click'); 

});

Sieht aus wie es ist ziemlich alt ist, aber dann wieder gibt es dort nicht viel Code. Ich denke, dass es ein wenig Aktualisierung benötigt, aber nicht viel.

Quelle

2010-06-24 20:03:29 user113716

ich das versucht, aber es nicht für das funktionierte "node" divs im mycanvas-label div. Ich lege ein div am Ende der Seite, die auch die Klasse "node" hat und der rechte Klick funktioniert für diesen. – Dan

@Dan - Ich habe Ihr CSS, HTML und den Code mit dem 'rightClick'-Aufruf kopiert und eingefügt, und das funktioniert bei den' .node' Elementen, die unter '.mycanvas-label' stehen. Getestet in Firefox, Safari, IE7 und IE8. – user113716

@Dan - Werden die '.node' Elemente innerhalb' .mycanvas-label' über den Aufruf von '$ .getJSON()' geladen? Wenn dies der Fall ist, wird es nicht funktionieren, es sei denn, Sie rufen innerhalb des '$ .getJSON()' Callbacks 'rightClick' auf. – user113716

versuchen diesen Code:

$("#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 return insgesamt div, die class = "node"

e.taget.textcontext Rückkehr Knotennamen enthalten, die in div Element ist

Quelle

2016-09-12 14:13:35 hossein

Wie kann ich ein Ereignis auslösen, wenn ich mit der rechten Maustaste auf ein div in einer Leinwand mit jQuery klicke

Antwort

Verwandte Themen