如何添加一个自定义右键菜单的网页?

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

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

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

当前回答

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

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

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

吉斯菲德尔

2011-02-05 19:59:26

其他回答

对于那些使用bootstrap 5和jQuery 3寻找一个非常简单的自定义上下文菜单的自包含实现的人来说，这里是…

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <title>Custom Context Menu</title>
</head>
<style>
#context-menu {
  position: absolute;
  display: none;
}
</style>
<body>
    <div class="container-fluid p-5">
        <div class="row p-5">
            <div class="col-4">
                <span id="some-element" class="border border-2 border-primary p-5">Some element</span>
            </div>
        </div>
        <div id="context-menu" class="dropdown clearfix">
            <ul class="dropdown-menu" style="display:block;position:static;margin-bottom:5px;">
              <li><a class="dropdown-item" href="#" data-value="copy">Copy</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#" data-value="select-all">Select All</a></li>
            </ul>
        </div>       
        <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
        <script>
            $('body').on('contextmenu', '#some-element', function(e) {
                $('#context-menu').css({
                    display: "block",
                    left: e.pageX,
                    top: e.pageY
                });
                return false;
            });
            $('html').click(function() {
                $('#context-menu').hide();
            });
            $("#context-menu li a").click(function(e){
                console.log('in context-menu item, value = ' + $(this).data('value'));
            });
        </script>
    </body>
</html>

改编自https://codepen.io/anirugu/pen/xjjxvG

2022-09-04 13:55:30

你应该记住，如果你想使用Firefox唯一的解决方案，如果你想把它添加到整个文档，你应该把contextmenu="mymenu"添加到<html>标签，而不是body标签。你应该注意这一点。

2014-10-10 17:45:04

<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>

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

2016-10-03 20:58:18

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

<body oncontextmenu="return false;">

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

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

例如:

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

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

2013-06-07 15:27:34

<script>
function fun(){
document.getElementById('menu').style.display="block";
}

</script>
<div id="menu" style="display: none"> menu items</div>

<body oncontextmenu="fun();return false;">

我在这里做什么

创建自己的自定义div菜单，并设置位置:绝对和显示:none以防万一。将oncontextmenu事件添加到要单击的页面或元素中。使用返回false取消默认的浏览器操作。使用js调用自己的操作。

2017-07-26 11:47:01

如何添加一个自定义右键菜单的网页?

推荐文章

最新文章

标签