如果对浏览器的鼠标右击菜单的选项不满意,可以通过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 href="javascript:;">右击菜单一</a>
        <a href="javascript:;">右击菜单二</a>
        <a href="javascript:;">右击菜单三</a>
        <a 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 代码来控制!