当我用jQuery在画布上右键单击div时,如何激发事件
更新:我更新了代码片段以包含在Firebug中找到的整个页面。当我用jQuery在画布上右键单击div时,如何激发事件
我有以下代码:
<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>
我希望能够右键点击的div之一的“节点”类,然后触发一个事件。有没有办法做到这一点与jQuery?我查看了在http://www.javascripttoolbox.com/lib/contextmenu/上找到的上下文菜单jQuery插件。但是,如果我使用$('node')。contextMenu(...)它不起作用。如果我使用$('infovis')。contextMenu(...)上下文菜单起作用。
它看起来像这些div实际上是在画布之外。我直接从Firebug中取出这段代码。
试试这个:
$(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该专区。因此,你想使用事件委托,所以你不是绑定到每个节点,而是一个父节点。这使得你的代码更快,即使你有1000个节点。另外,您不需要将绑定放在回调中。
我们委托mousedown并捕获事件,如果按钮== 2(右键单击按钮)。
您还可以通过停止contextmenu事件来禁用默认的右键单击行为。
让我知道,如果这对你有用。
你有没有试过jquery.rightClick插件?似乎在快速测试我做的工作:
http://abeautifulsite.net/blog/2008/05/jquery-right-click-plugin/
$('.node').rightClick(function() {
console.log('right click');
});
看起来这是很老了,但随后又没有太多的代码在那里。我认为它可能需要一点更新,但不是很多。
我尝试这样做的,但它没有为工作mycanvas-label div中的“node”div。我在页面的底部放置了一个div,该页面也具有类“节点”,右键点击适用于该节点。 – Dan 2010-06-24 20:21:03
@Dan - 我用'rightClick'调用复制并粘贴了你的CSS,HTML和代码,它适用于'.mycanvas-label'下的'.node'元素。测试Firefox,Safari,IE7和IE8。 – user113716 2010-06-24 20:43:17
@Dan - 通过调用''.getJSON()'加载'.mycanvas-label'中的'.node'元素?如果是这样,除非在'$ .getJSON()'回调中调用'rightClick',否则它将不起作用。 – user113716 2010-06-24 20:50:39
试试这个代码:
$("#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是div
元素
您的推荐适合我。 – Dan 2010-06-24 21:37:41