Fatal编程技术网
  • javascript/
  • Javascript 在使用jQuery右键单击画布中的div时，如何触发事件

Javascript 在使用jQuery右键单击画布中的div时，如何触发事件

javascript jquery html

Javascript 在使用jQuery右键单击画布中的div时，如何触发事件,javascript,jquery,html,Javascript,Jquery,Html,更新：我已经更新了代码片段，以包含在Firebug中找到的整个页面 我有以下代码： <html><head> <title>Welcome to CodeIgniter</title> <!--[if IE]> <script type="text/javascript" src="/assets/js/Jit/Extras/excanvas.js"></script> <![endif]-->

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

我有以下代码：

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


欢迎来到CodeIgniter
$（文档）.ready（函数（）{
$（“.node”）。右键单击（函数（）{
警报（“右键单击”）；
});
$.getJSON（“/ajax/fetch/tree”，函数（数据）{
init（数据）；
});
});
$（“.node”）.live（“单击”，函数（）{
警报（$（this.attr（“id”））；
});
html，正文{
宽度：100%；
身高：100%；
背景色：#444；
文本对齐：居中；
溢出：隐藏；
字体大小：9px；
字体系列：Verdana、Geneva、Arial、Helvetica、sans serif；
边距：0；填充：0；
}
/*可视化样式容器*/
#infovis{
背景色：#222；
位置：相对位置；
宽度：900px；
高度：500px；
}
a、 a:链接，a:已访问{
颜色：#343439；
}
/*spacetree节点CSS类*/
.节点{
背景色：透明；
字体大小：粗体；
溢出：隐藏；
文字装饰：无；
位置：绝对位置；
文本对齐：居中；
填充：4px 1px 1px 1px；
}
.节点：悬停{
颜色：#393434；
}
.隐藏{
显示：无；
}
0
2
2.1
2.2
2.3
1
3
1.1
5
5.1
你好，世界！
我希望能够用“node”类右键单击其中一个div，然后触发一个事件。有没有办法用jQuery做到这一点？我已经查看了在上找到的上下文菜单jQuery插件。但是，如果我使用$（'node'）.contextMenu（…），它将不起作用。如果我使用$（'infovis'）.contextMenu（…），上下文菜单就会工作

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

您尝试过jquery.rightClick插件吗？我做了一个快速测试：

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

试试这个：

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

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

如果button==2（右键单击按钮），我们将委托mousedown并捕获事件

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

让我知道这是否适用于您。

请尝试以下代码：

$("#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
返回包含
class=“node”

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

我尝试了这个方法，但对mycanvas标签div中的“node”div无效。我在页面底部放了一个div，该div也有类“node”，右键单击可以使用。@Dan-我复制并粘贴了你的CSS，HTML和带有
右键单击调用的代码，它在
.node
元素
.mycanvas标签下对我有效。在Firefox、Safari、IE7和IE8中测试。@Dan-是否通过调用
$.getJSON（）
加载
.mycanvas标签中的
.node
元素？如果是这样，除非您在
$.getJSON（）
回调中调用
右键单击它们，否则它将无法工作。我想知道这是否与jit生成HTML的方式有关。有趣的是$（“.node”）.live（“click”）可以在这些节点上工作。我自己能用纯javascript做些什么吗？在$.getJSON（）回调中右键单击也不起作用。

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

});`