【发布时间】：2014-07-16 05:38:19
【问题描述】：
在第一次点击时，我收到警报，tgid 作为 target1，点击下载警报 tgid 作为 target1.problems 在点击 target2 后出现在这里，警报是 target2，点击下载警报是 target1。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Custom Right Click using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var tgid;
// Menus
function menu(tgid)
{
alert(tgid);
var boxMenu = {
name: "boxmenu",
items: [{
text: "|Download",
command: function() {
// This is the menu option clicked
if ($(this).hasClass("active")) {
//here is the problem
alert("Clicked option 1 and target is: " + tgid);
}
},
active: true
},
{
text: "|Share",
command: doSomeFunction,
active: true
},
{
text: "|New Folder",
command: doSomeFunction,
active: true
},
{
text: "|Paste",
command: doSomeFunction,
active: true
},
{
text: "|Cut",
command: doSomeFunction,
active: true
},
{
text: "|Copy",
command: doSomeFunction,
active: true
},
{
text: "|Rename",
command: doSomeFunction,
active: true
},
{
text: "|Delete",
command: doSomeFunction,
active: true
}
]
};
return boxMenu;
}
// Example function of calling functions outside of a menu.
// Here "this" is going to refer to the option clicked.
function doSomeFunction() {
if ($(this).hasClass("active")) {
// alert(this.id);
alert("calling external function");
}
}
$("div").on("contextmenu",function(e){
tgid=this.id;
// alert(tgid);
var boxMenu=menu(tgid);
var newMenu = buildMenu(boxMenu,tgid);
var winWidth = $(window).width();
var winHeight = $(window).height();
// Menu not off screen to right
if ((e.pageX + newMenu.outerWidth()) > winWidth)
newMenu.css("left", winWidth - newMenu.outerWidth());
else
newMenu.css("left", e.pageX);
// Menu not off screen at bottom
if ((e.pageY + newMenu.outerHeight()) > winHeight)
newMenu.css("top", winHeight - newMenu.outerHeight());
else
newMenu.css("top", e.pageY);
newMenu.show();
return false;
});
});
// Takes a menu variable and the target element, builds the HTML and returns a reference to the menu.
function buildMenu(menu, tgid) {
if ($("#" + menu.name).length) {
var m = $("#" + menu.name);
m.hide();
return m;
}
// Build overall menu
var m = document.createElement("div");
m.className = "menu";
m.tgid = tgid;
m.id = menu.name;
//alert(m.tgid);
// Build options for menu based on menu variable
for (var i = 0; i < menu.items.length; i++) {
var item = document.createElement("div");
if (menu.items[i].active)
item.className = "menuOption active";
else
item.className = "menuOption inactive";
item.innerHTML = menu.items[i].text;
item.onclick = menu.items[i].command;
// alert(menu.items[i].command);
m.appendChild(item);
}
$("body").append(m);
return $(m);
}
// Clears all menus when click the document (as an example)
// Make your own custom trigger for when you want to dismiss them.
$(document).bind("mouseup", function(e) {
if (e.which == 1) { $(".menu").hide(); }
});
</script>
<style type="text/css">
#target {
border: #c0c0c0 solid 1px;
background-color: #f2f2f2;
width: 100px;
height: 100px;
}
.targetdiv {
border: #c0c0c0 solid 1px;
background-color: #FF0000;
width: 100px;
height: 100px;
}
.menu {
position: absolute;
display: none;
border: #c0c0c0 solid 1px;
font-family: calibri, arial, helvetica, sans serif;
}
div .menuOption {
padding: 4px 8px;
background-color: #f0f0f0;
}
div .active:hover {
cursor: pointer;
background-color: #99cb33;
color: #ffffff;
}
div .inactive {
color: #c0c0c0;
}
</style>
</head>
<body>
<div id="target1" class="targetdiv">target1</div>
<div id="target2" class="targetdiv">target2</div>
<div id="target3" class="targetdiv">target3</div>
</body>
</html>
【问题讨论】：
-
请同时发布您的代码。
-
我们对您的问题一无所知？你能用你的代码解释一下吗
-
可以发你的js吗？
-
这不是您要找的东西吗？ jsfiddle.net/ejaF6/1
标签： javascript jquery jquery-plugins contextmenu