我希望能够右键单击并让它调出菜单当前它调出菜单，但如果它不关闭，我就无法与它交互。但这段代码可以通过点击内部或外部来关闭它。我该如何制作它，以便我可以点击内部，我可以导航菜单，但如果我点击外部，它就会关闭？这是我的代码：
<style>
#contextMenuContainer {
display: none;
position: fixed;
border: 1px solid;
border-right: 1px solid black;
border-left: 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid black;
padding-top: 5px;
background: #c0c0c0;
width:150px;
z-index: 100;
}
#contextMenuContainer:after {
content: '';
top: -0px;
position: absolute;
border: 1px solid;
border-right: 1px solid gray;
border-left: 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid gray;
padding-left: 148px;
padding-top: 155px;
}
#contextMenuContainer #contextMenu {
list-style: none;
padding: 0px;
font-size: 14px;
font-family: notbold;
}
#contextMenuContainer #contextMenu li {
font-size: 14px;
cursor: pointer;
padding-top: 0px;
padding-left: 30px;
padding-bottom: 5px;
text-align: relative;
}
#divider {
position: relative;
border: 1px solid;
border-right: transparent;
border-left: transparent;
border-top: 1px solid gray;
border-bottom: 1px solid white;
padding: 0px 0px;
}
#clear_divider {
position: relative;
border: 1px solid;
border-right: transparent;
border-left: transparent;
border-top: transparent;
border-bottom: transparent;
padding: 3px 0px;
}
</style>
<div id="contextMenuContainer" >
<div id="contextMenu">
<li style="color:gray" onclick="ms(true)">Arrange Icons ►</li>
<li style="color:gray">Lin<u>e</u> up Icons</li>
<div id="divider"></div>
<div id="clear_divider"></div>
<li style="color:gray"><u>P</u>aste</li>
<li style="color:gray">Paste <u>S</u>hortcut</li>
<div id="divider"></div>
<div id="clear_divider"></div>
<li style="color:gray">Ne<u>w</u> ►</li>
<div id="divider"></div>
<div id="clear_divider"></div>
<li>P<u>r</u>operties</li>
</div>
</div>
<script>
$(function() {
var doubleClicked = false;
$(document).on("contextmenu", function (e) {
if(doubleClicked == false) {
e.preventDefault(); // To prevent the default context menu.
var windowHeight = $(window).height()/2;
var windowWidth = $(window).width()/2;
//When user click on bottom-left part of window
if(e.clientY > windowHeight && e.clientX <= windowWidth) {
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY > windowHeight && e.clientX > windowWidth) {
//When user click on bottom-right part of window
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
//When user click on top-left part of window
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("bottom", "auto");
} else {
//When user click on top-right part of window
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("bottom", "auto");
}
$("#contextMenuContainer").fadeIn(0, FocusContextOut());
doubleClicked = false;
} else {
e.preventDefault();
doubleClicked = true;
$("#contextMenuContainer").fadeOut(0);
}
});
function FocusContextOut() {
$(document).on("click", function () {
doubleClicked = false;
$("#contextMenuContainer").fadeOut(0);
$(document).off("click");
});
}
});
</script>
我试着把它弄得一团糟，但我想不通。这是一个JSfiddle：JSFIDDL这可能是一个简单的解决方案，谢谢。
在$(document).on("click", function () {中，您可以检查目标点击是否来自上下文菜单或其任何子菜单，如下所示：
function isContextMenu(element) {
if($(element).closest('#contextMenuContainer').length >= 1) {
return true;
}
return false;
}
function FocusContextOut() {
$(document).on("click", function (event) {
doubleClicked = false;
if(false === isContextMenu(event.target)) { // see this
$("#contextMenuContainer").fadeOut(0);
}
$(document).off("click");
});
}
$(function() {
var doubleClicked = false;
$(document).on("contextmenu", function (e) {
if(doubleClicked == false) {
e.preventDefault(); // To prevent the default context menu.
var windowHeight = $(window).height()/2;
var windowWidth = $(window).width()/2;
//When user click on bottom-left part of window
if(e.clientY > windowHeight && e.clientX <= windowWidth) {
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY > windowHeight && e.clientX > windowWidth) {
//When user click on bottom-right part of window
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
//When user click on top-left part of window
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("bottom", "auto");
} else {
//When user click on top-right part of window
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("bottom", "auto");
}
$("#contextMenuContainer").fadeIn(0, FocusContextOut());
doubleClicked = false;
} else {
e.preventDefault();
doubleClicked = true;
$("#contextMenuContainer").fadeOut(0);
}
});
function isContextMenu(element) {
if($(element).closest('#contextMenuContainer').length >= 1) {
return true;
}
return false;
}
function FocusContextOut() {
$(document).on("click", function (event) {
doubleClicked = false;
if(false === isContextMenu(event.target)) {
$("#contextMenuContainer").fadeOut(0);
}
$(document).off("click");
});
}
});#contextMenuContainer {
display: none;
position: fixed;
border: 1px solid;
border-right: 1px solid black;
border-left: 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid black;
padding-top: 5px;
background: #c0c0c0;
width:150px;
z-index: 100;
}
#contextMenuContainer:after {
content: '';
top: -0px;
position: absolute;
border: 1px solid;
border-right: 1px solid gray;
border-left: 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid gray;
padding-left: 148px;
padding-top: 155px;
}
#contextMenuContainer #contextMenu {
list-style: none;
padding: 0px;
font-size: 14px;
font-family: notbold;
}
#contextMenuContainer #contextMenu li {
font-size: 14px;
cursor: pointer;
padding-top: 0px;
padding-left: 30px;
padding-bottom: 5px;
text-align: relative;
}
#divider {
position: relative;
border: 1px solid;
border-right: transparent;
border-left: transparent;
border-top: 1px solid gray;
border-bottom: 1px solid white;
padding: 0px 0px;
}
#clear_divider {
position: relative;
border: 1px solid;
border-right: transparent;
border-left: transparent;
border-top: transparent;
border-bottom: transparent;
padding: 3px 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contextMenuContainer" >
<div id="contextMenu">
<li style="color:gray" onclick="ms(true)">Arrange Icons ►</li>
<li style="color:gray">Lin<u>e</u> up Icons</li>
<div id="divider"></div>
<div id="clear_divider"></div>
<li style="color:gray"><u>P</u>aste</li>
<li style="color:gray">Paste <u>S</u>hortcut</li>
<div id="divider"></div>
<div id="clear_divider"></div>
<li style="color:gray">Ne<u>w</u> ►</li>
<div id="divider"></div>
<div id="clear_divider"></div>
<li>P<u>r</u>operties</li>
</div>
</div>在function FocusContextOut()中，您应该检查，是否在上下文菜单中单击。如果在里面点击，不要隐藏上下文菜单。
function FocusContextOut() {
$(document).on("click", function () {
doubleClicked = false;
$("#contextMenuContainer").fadeOut(0);
$(document).off("click");
});
}
--------------
function FocusContextOut() {
$(document).on("click", function (e) {
if(!(e.target.closest('#contextMenuContainer'))){
doubleClicked = false;
$("#contextMenuContainer").fadeOut(0);
$(document).off("click");
}
});
$(function() {
var doubleClicked = false;
$(document).on("contextmenu", function (e) {
if(doubleClicked == false) {
e.preventDefault(); // To prevent the default context menu.
var windowHeight = $(window).height()/2;
var windowWidth = $(window).width()/2;
//When user click on bottom-left part of window
if(e.clientY > windowHeight && e.clientX <= windowWidth) {
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY > windowHeight && e.clientX > windowWidth) {
//When user click on bottom-right part of window
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
//When user click on top-left part of window
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("bottom", "auto");
} else {
//When user click on top-right part of window
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("bottom", "auto");
}
$("#contextMenuContainer").fadeIn(0, FocusContextOut());
doubleClicked = false;
} else {
e.preventDefault();
doubleClicked = true;
$("#contextMenuContainer").fadeOut(0);
}
});
function FocusContextOut() {
$(document).on("click", function (e) {
if(!(e.target.closest('#contextMenuContainer'))){
doubleClicked = false;
$("#contextMenuContainer").fadeOut(0);
$(document).off("click");
}
});
}
});#contextMenuContainer {
display: none;
position: fixed;
border: 1px solid;
border-right: 1px solid black;
border-left: 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid black;
padding-top: 5px;
background: #c0c0c0;
width:150px;
z-index: 100;
}
#contextMenuContainer:after {
content: '';
top: -0px;
position: absolute;
border: 1px solid;
border-right: 1px solid gray;
border-left: 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid gray;
padding-left: 148px;
padding-top: 155px;
}
#contextMenuContainer #contextMenu {
list-style: none;
padding: 0px;
font-size: 14px;
font-family: notbold;
}
#contextMenuContainer #contextMenu li {
font-size: 14px;
cursor: pointer;
padding-top: 0px;
padding-left: 30px;
padding-bottom: 5px;
text-align: relative;
}
#divider {
position: relative;
border: 1px solid;
border-right: transparent;
border-left: transparent;
border-top: 1px solid gray;
border-bottom: 1px solid white;
padding: 0px 0px;
}
#clear_divider {
position: relative;
border: 1px solid;
border-right: transparent;
border-left: transparent;
border-top: transparent;
border-bottom: transparent;
padding: 3px 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contextMenuContainer" >
<div id="contextMenu">
<li style="color:gray" onclick="ms(true)">Arrange Icons ►</li>
<li style="color:gray">Lin<u>e</u> up Icons</li>
<div id="divider"></div>
<div id="clear_divider"></div>
<li style="color:gray"><u>P</u>aste</li>
<li style="color:gray">Paste <u>S</u>hortcut</li>
<div id="divider"></div>
<div id="clear_divider"></div>
<li style="color:gray">Ne<u>w</u> ►</li>
<div id="divider"></div>
<div id="clear_divider"></div>
<li>P<u>r</u>operties</li>
</div>
</div>