-1
我有热点（HTML区域元素）的html图像。我有代码可以显示右键点击热点时的上下文菜单，因为在某些情况下，热点可以在逻辑上导航到一个以上的目的地。如果用户点击其他地方，Javascript如何关闭上下文菜单
我有一些很好的工作代码基于W3C行星的例子。我的菜单出现在热点附近，风格很好。如果我点击一个项目，它会浏览。
该菜单是动态的，实际上会被Angular代码和JSON所占用。目前菜单是用模拟功能硬编码的。
如果一个项目被点击，菜单消失（和导航如下）。我知道我的隐藏菜单代码有效，因为我有一个用于测试的隐藏菜单按钮。
我的问题是一旦菜单显示我无法弄清楚如何让用户关闭菜单$（'body'）。click（hideMenu）[line 130]不起作用，因为它不接受作为一个指针（对不起，如果错误的术语）功能稍后执行;相反，它会立即执行，即使我省略了括号。
该代码可在JSFiddle http://jsfiddle.net/simonmeaden/98mukrff/8/这里找到，虽然它不在小提琴中工作。从Visual Studio启动的工作是什么？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="contextMenus.css" rel="stylesheet" />
<title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="JavaScript1.js"></script>
<table>
<tr>
<td>Some text to shift image along</td>
<td>
<img id="planets" src="http://www.w3schools.com/tags/planets.gif" usemap="#planetmap">
<map name="planetmap" width="145" height="126" alt="Planets">
<area id="planetmap_AreaSun" shape="rect" coords="0,0,82,126" href="http://www.w3schools.com/tags/sun.htm" alt="Sun">
<area id="planetmap_AreaMercury" shape="circle" coords="90,58,3" href="http://www.w3schools.com/tags/mercur.htm" alt="Mercury">
<area id="planetmap_AreaVenus" shape="circle" coords="124,58,8" href="http://www.w3schools.com/tags/venus.htm" alt="Venus">
</map>
</td>
</tr>
<tr>
<td>
<ul class="context-menu" id="my_custom_menu">
<!--style="display:none;"-->
<li>Strawberry</li>
<li>Raspberry</li>
</ul>
</td>
</tr>
</table>
<!--<button id="button_ShowMenu2" onclick="setMenu('my_custom_menu', this, dynamicMenu())" type="button">Show Menu</button> -->
<button id="button_ShowMenu" type="button">Show Menu</button>
<button id="button_HideMenu" onclick="hideMenu()" type="button">Hide Menu</button>
</body>
</html>
样式
.context-menu {
/*position: absolute;*/
display: block;
background-color: #f2f2f2;
border-radius: 4px;
font-family: Arial, sans-serif;
font-size: 14px;
min-width: 150px;
border: 1px solid #d4d4d4;
z-index:1200;
list-style-type: none;
text-decoration: none;
}
.context-menu ul {
list-style-type: none;
margin: 4px 0px;
padding: 0px;
cursor: default;
}
.context-menu ul li {
padding: 4px 16px;
}
.context-menu ul li:hover {
background-color: #4677f8;
color: #fefefe;
}
a {
text-decoration: none;
}
.context-menu ul li a {
text-decoration: none;
}
.context-menu ul li:hover a {
text-decoration: none;
}
.context-menu ul li a:hover, a:hover span {
background-color: #4677f8;
color: #fefefe;
}
function hideMenu() {
console.log("hideMenu entered");
var sMenuId = $('body').data('data-activeMenu');
if (sMenuId !== '') {
var jqMenu = $('#' + sMenuId);
if (jqMenu) {
jqMenu.css('display', 'none');
} else {
alert("menu (ul) id '" + sMenuId + "' not found!");
}
} else {
alert("menu id '" + sMenuId + "' is null!");
}
}
$(document).ready(function() {
wireUpContextMenu('#planetmap_AreaVenus');
wireUpButton();
var gMousepos = [0, 0];
document.onmousemove = function (evt) {
evt = evt || window.event;
if (typeof evt.pageX != 'undefined') {
// Firefox support
gMousepos = [evt.pageX, evt.pageY];
} else {
// IE support
var scrollpos = getDocScrollPos();
gMousepos = [evt.clientX + scrollpos[0], evt.clientY + scrollpos[1]];
};
};
//alert("run");
function dynamicMenu() {
var fruits = [{
itemText: "Apple",
href: "http:\/\/images.clipartpanda.com\/teacher-apple-clipart-apple-clipartclipart---simple-red-apple-3e7q8rci.png"
}, {
itemText: "Orange",
href: "http:\/\/www.google.com"
}, {
itemText: "Banana",
href: "http:\/\/www.bbc.co.uk"
}, {
itemText: "Grape",
href: "http:\/\/www.hotmail.com"
}];
return fruits;
}
function wireUpContextMenu(elementId) {
var elementForMenuLaunch = $(elementId);
if (elementForMenuLaunch) {
elementForMenuLaunch.bind('contextmenu', function (e) {
e.preventDefault();
var jqElement = $(this);
//var mousepos=getMousePos();
var position = jqElement.position();
var lPixelLeft = gMousepos[0];//position.left;
var lPixelTop = gMousepos[1];//position.top;
setMenuInner('my_custom_menu', lPixelLeft, lPixelTop, dynamicMenu());
//alert('The eventhandler will make sure, that the contextmenu doesn\'t appear.');
});
} else {
alert("elementForMenuLaunch '" + elementId + "'is not found!");
}
};
//function getMousePos() {
//}
function getDocScrollPos() {
var x = document.body.scrollLeft ||
document.documentElement.scrollLeft ||
window.pageXOffset || 0,
y = document.body.scrollTop ||
document.documentElement.scrollTop ||
window.pageYOffset || 0;
return [x, y];
}
function isIE(userAgent) {
userAgent = userAgent || navigator.userAgent;
return userAgent.indexOf("MSIE ") > -1 || userAgent.indexOf("Trident/") > -1;
}
function navigateTo(e) {
console.log("hideMenu entered");
hideMenu();
var href = jQuery.data(this, 'data-href');
console.log("called navigateTo " + href);
window.location.href = href;
}
function setMenuInner(sMenuId, lPixelLeft, lPixelTop, jsonItems) {
//console.log("setMenu entered");
if (sMenuId !== '') {
var jqMenu = $('#' + sMenuId);
if (jqMenu) {
jqMenu.empty();
//jQuery.data(document.body, 'data-activeMenu', sMenuId);
//hideMenu();
//$('body').click(hideMenu());
var lItemCount = jsonItems.length;
for (var i = 0; i < lItemCount; i++) {
var jqListItemNew = $("<li data-href='" + jsonItems[i].href + "'></li>").appendTo(jqMenu);
var jqAnchor = $("<a href='#'></a>").appendTo(jqListItemNew);
var jqSpan = $("<span data-href='" + jsonItems[i].href + "'>" + jsonItems[i].itemText + "</span>").appendTo(jqAnchor);
jqSpan.data('data-href', jsonItems[i].href);
jqSpan.click(navigateTo);
}
$('body').data('data-activeMenu', '');
if ($('body').data('data-activeMenu') != '') {
alert('failed to clear data-activeMenu on Body');
};
//[Line 130 in fiddle screen]$('body').click(hideMenu)
$('body').data('data-activeMenu', sMenuId);
if ($('body').data('data-activeMenu') != sMenuId) {
alert('failed to set data-activeMenu on Body');
};
jqMenu.css('position', 'absolute');
jqMenu.css('left', lPixelLeft + 'px');
jqMenu.css('top', lPixelTop + 'px');
jqMenu.css('display', 'block');
} else {
alert("menu (ul) id '" + sMenuId + "' not found!");
}
} else {
alert("menu id '" + sMenuId + "' is null!");
}
}
function wireUpButton() {
var sButtonId = '#button_ShowMenu';
var buttonMoveList = $(sButtonId);
if (buttonMoveList) {
buttonMoveList.click(function() {
setMenuInner('my_custom_menu', 400, 100, dynamicMenu());
});
} else {
alert("button element id '" + sButtonId + "' not found!");
}
};
});
'hideMenu（）'是不是指针，它是一个调用... – Teemu
// $（ '身体'）点击（ hideMenu）被注释掉并且是代码的候选行.... –
请将行号添加到代码中。谁将会计算一堆代码的行数？ – Teemu