JS如何实现自定义鼠标右击菜单-木庄网络博客

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

这次给大家带来JS如何实现自定义鼠标右击菜单，JS实现自定义鼠标右击菜单的注意事项有哪些，下面就是实战案例，一起来看一下。

自定义鼠标右击菜单要素：

禁止页面默认右击事件

设置右击菜单的样式以及菜单出现的位置（通过捕获鼠标点击位置来确定菜单的位置）

鼠标在指定控件（区域）上右击时显示菜单（默认菜单隐藏，点击鼠标右键时显示）

效果图

代码如下：

HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="right-click.css" />
</head>
<body>
    <div id="contain-friend">右击显示菜单</div>
    <label id="label1"></label>
    <div id="menu-friend">
        <div>
            <button id="btn1">菜单一</button>
        </div>
        <div>
            <button id="btn2">菜单二</button>
        </div>
    </div>
    <script src="right-click.js"></script>
</body>
</html>