当我使用jQuery在画布中右键单击一个div时，如何触发一个事件?

UPDATE: I have updated the code snippet to include the whole page as found in Firebug.

更新:我已经更新了代码片段以包含在Firebug中找到的整个页面。

I have the following 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>

I want to be able to right click on one of the divs with the "node" class and then fire an event. Is there a way to do this with jQuery? I have looked at the context menu jQuery plugin found at http://www.javascripttoolbox.com/lib/contextmenu/. However, if I use $('node').contextMenu(...) it doesn't work. If I use $('infovis').contextMenu(...) the context menu works.

我希望能够用“node”类右键单击其中一个div，然后触发一个事件。有办法用jQuery实现这一点吗?我查看了http://www.javascripttoolbox.com/lib/contextmenu/上的上下文菜单jQuery插件。但是，如果我使用$('node'). contextmenu(…)，它就不能工作。如果我使用$('infovis'). contextmenu(…)，那么上下文菜单就可以工作了。

It looks like these divs are actually outside the canvas. I pulled this code straight from Firebug.

看起来这些div实际上是在画布之外。我直接从Firebug中提取了这个代码。

3 个解决方案

#1

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

    }); 
});

I assume #infovis is visible from the outset and you are using javascript to populate that div with .node divs. Thus, you want to use event delegation, so you are not binding to each node, but a parent node instead. This makes your code faster, even if you have 1000 .nodes. Also, you don't need to put the bindings in a callback.

我假设#infovis从一开始就是可见的，您正在使用javascript用.node divs填充div。因此，您希望使用事件委托，因此不绑定到每个节点，而是绑定到父节点。这使代码更快，即使您有1000个.node。而且，不需要将绑定放在回调中。

We delegate to mousedown and capture the event if button == 2 (the right click button).

我们委托到mousedown并捕获事件if按钮= 2(右击按钮)。

Also you disable default right click behavior by stopping the contextmenu event.

还可以通过停止contextmenu事件来禁用默认的右击行为。

Let me know if that works for you.

如果对你有用，请告诉我。

#2

Have you tried the jquery.rightClick plugin? Seems to work on a quick test I did:

你试过jquery吗?rightClick插件吗?我做了一个快速测试:

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

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

    console.log('right click');

});

Looks like it's pretty old, but then again there's not much code there. I think it may need a little updating, but not much.

看起来它很老了，但还是没有太多的代码。我认为它可能需要一点更新，但不是很多。

#3

try this 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 total of div that contain class = "node"

e。包含class = "node"的div的目标返回总数

e.taget.textcontext return node name that is in div element

e.taget。textcontext返回div元素中的节点名

#1