我已经用HTML创建了自己的上下文菜单。效果很好,但是当我打开右边的菜单时,其中一半在里面。有没有一种方法可以检查它,然后将其添加到鼠标位置的顶部?
这里的图片看起来如何:https://media.discordapp.net/attachments/648794604132499459/707151713542602792/unknown.pnghttps://media.discordapp.net/attachments/648794604132499459/707151701483978842/unknown.png
这里输入我的代码:
Javascript:
const cm = document.querySelector(".custom-cm");
function showContextMenu(show = true) {
cm.style.display = show ? "block" : "none";
}
window.addEventListener("contextmenu", e => {
e.preventDefault();
showContextMenu();
cm.style.top = e.y + "px" + cm.offsetHeight > window.innerHeight ? window.innerHeight - cm.offsetHeight : e.y + "px";
cm.style.left = e.x + "px" + cm.offsetWidth > window.innerWidth ? window.innerWidth - cm.offsetWidth : e.x + "px";
});
window.addEventListener("click", () => {
showContextMenu(false);
});
HTML:
<div class="custom-cm">
<div class="custom-cm__item" onclick="closeAndFocus()">Text eingeben</div>
<div class="custom-cm__item" onclick="copyText()">Text kopieren</div>
<div class="custom-cm__divider"></div>
<div class="custom-cm__item" onclick="helpMenu()">Hilfe</div>
<div id="SavePicLine" class="custom-cm__divider" style="display: none;"></div>
<div id="SavePic" class="custom-cm__item" onclick="downloadPic()" style="display: none;">Bild speichern</div>
<div class="custom-cm__divider"></div>
<div class="custom-cm__item" onclick="window.location.reload()">Aktualisieren</div>
<div class="custom-cm__item" onclick="showContextMenu(false);">Schließen</div>
</div>
CSS:
.custom-cm {
background-color: #ffffff;
border: 1px solid #cccccc;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
padding: 10px 0;
position: absolute;
top: 0;
left: 0;
width: 150px;
display: none;
}
.custom-cm__item {
cursor: pointer;
padding: 8px 15px;
}
.custom-cm__item:hover {
background-color: #f3f3f3;
}
.custom-cm__divider {
border-bottom: 1px solid #eeeeee;
margin: 10px 0;
}
您可以在这里进行测试:https://codepen.io/IBimsEinDomi/pen/PoPEJER
多数民众赞成在:
function eventShowCM(e){
e.preventDefault();
showContextMenu();
if(e.clientY + cm.offsetHeight < window.innerHeight) {
cm.style.top = e.clientY + "px";
}
else {
cm.style.top = (window.innerHeight - cm.offsetHeight) + "px";
}
if(e.clientX + cm.offsetWidth < window.innerWidth) {
cm.style.left = e.clientX + "px";
}
else {
cm.style.left = (window.innerWidth - cm.offsetWidth) + "px";
}
}
window.addEventListener("contextmenu", eventShowCM);
window.addEventListener("click", function(){
showContextMenu(false);
});