javascript自定义鼠标右击菜单

发布时间：2023-01-02 08:32:47 来源：互联网

.

你若决定灿烂，倒影也会美得让人惊叹。早安！幸运从来不是偶然，你所做的每件事，都会有惊喜等待着你。早安。

ZBLOG静态化插件

如果对浏览器的鼠标右击菜单的选项不满意，可以通过js代码来监听鼠标右击事件，来显示自定义的菜单，具体的实现代码可参考下面的显示代码！

js自定义鼠标右击菜单

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>--右键菜单</title>
    <style type="text/css">
        #menu_alert {
            position: fixed;
            border: 1px solid #ccc;
            padding: 0 0px;
            display: none;
        }
        #menu_alert a{
            height: 45px;
            line-height: 45px;
            border-bottom: 1px dashed #ccc;
            width: 150px;
            text-align: center;
            display: block;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="menu_alert">
        <a rel="nofollow" href="javascript：;">右击菜单一</a>
        <a rel="nofollow" href="javascript：;">右击菜单二</a>
        <a rel="nofollow" href="javascript：;">右击菜单三</a>
        <a rel="nofollow" href="javascript：;">右击菜单四</a>
    </div>
    <script type="text/javascript">
        document.oncontextmenu = function (e) {
            var e = e || window.event;
            var oX = e.clientX;
            var oY = e.clientY;
            $('#menu_alert').css({ 'left': oX + 'px', 'top': oY + 'px','display':'block'}); 
            return false; 
        };
        //鼠标左键点击隐藏菜单
        $(document).on('click', function(e){ 
                var e = e || window.event; 
                $('#menu_alert').css('display','none'); 
            }
        );
    </script>
</body>
</html>

JQ自定义鼠标右键菜单

jquery代码也可以实现上面的功能，只需要引入jquery文件并替换下面的jq代码即可！

示例代码：

<script type="text/javascript">
    $(document).bind('contextmenu', function (e) {
        return false; //这段代码来禁止浏览器的系统右击菜单
    });
    $(document).mousedown(function (e) {
        if (3 == e.which) {    
            var e = e || window.event;
            var oX = e.clientX;
            var oY = e.clientY;
            $('#menu_alert').css({ 'left': oX + 'px', 'top': oY + 'px', 'display': 'block' });
            return false;
        }
    });
    $(document).on('click',function(e){
        $('#menu_alert').css('display', 'none'); 
    });
</script>

ps:

上面说的js与jq自定义右击菜单示例，还有很多的后期工作要做，比如菜单的显示位置，菜单的展示方式，菜单隐藏的方法等等，都可以通过 css 与 js 代码来控制！

到此这篇关于javascript自定义鼠标右击菜单就介绍到这了。生命本是一泓清泉，只有挑战自我的人才能品味出其中的甘洌；生命本是一部史书，只有挑战自我的人才能体味出其中的浩荡；生命就像一首优美的歌曲，只有挑战自我的人才能谱写出优美的旋律。更多相关javascript自定义鼠标右击菜单内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章: