如何在网页中添加自定义右键菜单？

Question

如何在网页中添加自定义右键菜单？

javascriptcontextmenuright-click

415

我想在我的网络应用程序中添加一个自定义右键菜单。是否可以在不使用任何预制库的情况下完成？如果可以，如何显示一个简单的自定义右键菜单，而不使用第三方JavaScript库？

我希望实现类似于Google文档的功能。它允许用户右键单击并显示他们自己的菜单。

注意：我想学习如何制作自己的自定义右键菜单，而不是使用别人已经制作好的东西，因为大多数时候，这些第三方库都有很多功能，而我只需要我需要的功能，所以我想完全手工制作。

- Registered User

5

刚刚偶然发现了这个网站：http://davidwalsh.name/html5-context-menu，喜欢HTML5。 - Nijboer IT

5

这绝对不是重复的问题。因为这个问题要求没有第三方库的答案，而另一个问题很可能使用Jquery *(我想写一个用户脚本中类似于Google驱动器的上下文菜单的上下文)*。 - user2284570

1

今天我找到了两个关于这个问题的好例子（我认为）：DEMO 1 // DEMO 2（这个演示需要 jquery UI）。希望对大家有所帮助，再见。 - Drako

3

只是想指出，HTML5上下文菜单只在某些Firefox版本中受支持，据我所知其他浏览器都不支持。Chrome自版本61起就不再支持它。 - Dan Willett

4

针对使用React的人 - native-menu 复制了所有现有功能（复制、在新标签页中打开、在Google上搜索等），同时外观看起来更符合本地化（根据浏览器应用不同的样式）。演示。 - Sam Denty

22个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WowOWwoW · Answer 1

如果您想使用仅适用于Firefox的解决方案，那么请记住，如果您想将其添加到整个文档中，则应将contextmenu="mymenu"添加到<html>标签而不是body标签。
请注意这一点。

- fedeghe · Answer 2

我使用类似以下内容的 jsfiddle

function onright(el, cb) {
    //disable right click
    document.body.oncontextmenu = 'return false';
    el.addEventListener('contextmenu', function (e) { e.preventDefault(); return false });
    el.addEventListener('mousedown', function (e) {
        e = e || window.event;
        if (~~(e.button) === 2) {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
            return false;
        }
    });

    // then bind Your cb
    el.addEventListener('mousedown', function (e) {
        e = e || window.event;
        ~~(e.button) === 2 && cb.call(el, e);
    });
}

如果你的目标是旧版IE浏览器，你应该使用'attachEvent'来完善它。