我想添加一个自定义右键菜单到我的web应用程序。这可以在不使用任何预先构建的库的情况下完成吗?如果是这样,如何显示一个简单的自定义右键菜单,不使用第三方JavaScript库?

我的目标是像谷歌Docs做的东西。它允许用户右键单击并显示用户自己的菜单。

注意: 我想学习如何制作我自己的,而不是使用别人已经制作的东西,因为大多数时候,那些第三方库的功能都很臃肿,而我只想要我需要的功能,所以我希望它完全由我手工制作。


当前回答

你可以试着通过在body标签中添加以下内容来阻止上下文菜单:

<body oncontextmenu="return false;">

这将阻止对上下文菜单的所有访问(不仅从鼠标右键,而且从键盘)。

附注:你可以把它添加到任何你想禁用上下文菜单的标签上

例如:

<div class="mydiv" oncontextmenu="return false;">

将禁用上下文菜单在特定的div只

其他回答

你可以试着通过在body标签中添加以下内容来阻止上下文菜单:

<body oncontextmenu="return false;">

这将阻止对上下文菜单的所有访问(不仅从鼠标右键,而且从键盘)。

附注:你可以把它添加到任何你想禁用上下文菜单的标签上

例如:

<div class="mydiv" oncontextmenu="return false;">

将禁用上下文菜单在特定的div只

<html>
<head>
<style>
.rightclick {
    /* YOUR CONTEXTMENU'S CSS */
    visibility: hidden;
    background-color: white;
    border: 1px solid grey;
    width: 200px;
    height: 300px;
}
</style>
</head>
<body>
  <div class="rightclick" id="ya">
    <p onclick="alert('choc-a-late')">I like chocolate</p><br><p onclick="awe-so-me">I AM AWESOME</p>
  </div>
  <p>Right click to get sweet results!</p>
</body>
<script>
    document.onclick = noClick;
    document.oncontextmenu = rightClick;
    function rightClick(e) {
        e = e || window.event;
        e.preventDefault();
        document.getElementById("ya").style.visibility = "visible";
        console.log("Context Menu v1.3.0 by IamGuest opened.");
   }
function noClick() {
    document.getElementById("ya").style.visibility = "hidden";
    console.log("Context Menu v1.3.0 by IamGuest closed.");
}
</script>
<!-- Coded by IamGuest. Thank you for using this code! -->
</html>

您可以调整和修改这段代码,使上下文菜单看起来更美观、更高效。至于修改一个现有的上下文菜单,我不知道如何做到这一点…看看这把小提琴,有组织的观点。另外,试着点击我的上下文菜单中的项目。他们应该提醒你一些很棒的信息。如果它们不起作用,那就试试别的……复杂。

回答你的问题-使用上下文菜单事件,如下所示:

if (document.addEventListener) { 文档。addEventListener('contextmenu',函数(e) { alert(“您已尝试打开上下文菜单”);//在这里您可以绘制自己的菜单 e.preventDefault (); },假); }其他{ 文档。attachEvent('oncontextmenu', function() { alert(“您已尝试打开上下文菜单”); window.event.returnValue = false; }); } <身体> Lorem ipsum…… < /身体>

但是你应该问问自己,你真的想要覆盖默认的右击行为吗?这取决于你正在开发的应用程序。


吉斯菲德尔

我知道这个问题已经有了答案,但我花了一些时间来解决第二个答案,以使本机上下文菜单消失,并在用户单击的地方显示出来。 超文本标记语言

<body>
    <div id="test1">
        <a href="www.google.com" class="test">Google</a>
        <a href="www.google.com" class="test">Link 2</a>
        <a href="www.google.com" class="test">Link 3</a>
        <a href="www.google.com" class="test">Link 4</a>
    </div>

    <!-- initially hidden right-click menu -->
    <div class="hide" id="rmenu">
        <ul>
            <li class="White">White</li>
            <li>Green</li>
            <li>Yellow</li>
            <li>Orange</li>
            <li>Red</li>
            <li>Blue</li>
        </ul>
    </div>
</body>

CSS

.hide {
  display: none;
}

#rmenu {
  border: 1px solid black;
  background-color: white;
}

#rmenu ul {
  padding: 0;
  list-style: none;
}
#rmenu li
{
  list-style: none;
  padding-left: 5px;
  padding-right: 5px;
}

JavaScript

if (document.getElementById('test1').addEventListener) {
    document.getElementById('test1').addEventListener('contextmenu', function(e) {
            $("#rmenu").toggleClass("hide");
            $("#rmenu").css(
              {
                position: "absolute",
                top: e.pageY,
                left: e.pageX
              }
            );
            e.preventDefault();
     }, false);
}

// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});

CodePen例子

最简单的跳跃开始函数,在光标位置创建一个上下文菜单,在鼠标离开时破坏自己。

oncontextmenu = (e) => { e.preventDefault() let menu = document.createElement("div") menu.id = "ctxmenu" menu.style = `top:${e.pageY-10}px;left:${e.pageX-40}px` menu.onmouseleave = () => ctxmenu.outerHTML = '' menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p><p onclick='alert(`Thank you!`)'>Upvote</p>" document.body.appendChild(menu) } #ctxmenu { position: fixed; background: ghostwhite; color: black; cursor: pointer; border: 1px black solid } #ctxmenu > p { padding: 0 1rem; margin: 0 } #ctxmenu > p:hover { background: black; color: ghostwhite }