基于jQuery的鼠标右键菜单-蒲公英云

基于jQuery的鼠标右键菜单

对于自制的鼠标右键功能，我们应该考虑哪些因素呢？

一、涉及因素

1、阻止默认鼠标右键事件。

3、右键事件，使菜单出现。

2、考虑右键菜单出现的位置，是否超出窗口。

4、点击窗口任意位置，菜单消失。

二、具体代码及分析如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基于jQuery鼠标右键菜单</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-family: "微软雅黑";
                box-sizing: border-box;
                list-style: none;
            }
            h2 {
                margin: 100px auto;
                width: 500px;
                padding: 20px;
                font-size: 30px;
                letter-spacing: 10px;
                color: #FFFFFF;
                text-align: center;
                border-top: 3px solid #d56f22;
                border-bottom: 3px solid #d56f22;
                border-radius: 10px;
            }
            .contextmenu {
                display: none;
                position: absolute;
                width: 200px;
                background: #FFFFFF;
                border-radius: 5px;
                overflow: hidden;
                z-index: 99;
            }
            .contextmenu li {
                border-left: 3px solid transparent;
                transition: ease 0.3s;
            }
            .contextmenu li:hover {
                background: #CE93D8;
                border-left: 3px solid #9C27B0;
            }
            .contextmenu li a {
                display: block;
                padding: 10px;
                color: #000000;
                text-decoration: none;
                transition: ease 0.3s;
            }
            .contextmenu li:hover a {
                color: #FF0000;
            }
        </style>
    </head>
    <body style="background: #2C3E50;">
        <h2>提示：鼠标右键点击</h1>
        <ul class="contextmenu">
            <li>
                <a href="">百度</a>
            </li>
            <li>
                <a href="#">搜狐</a>
            </li>
            <li>
                <a href="#">搜狗</a>
            </li>
            <li>
                <a href="#">必应</a>
            </li>
            <li>
                <a href="#">网易</a>
            </li>
        </ul>
    </body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    // 文档加载后激活函数
    $(document).ready(function() {
        // 鼠标右键事件
        $(document).contextmenu(function(e) {
            // 获取窗口尺寸
            var winWidth = $(document).width();
            var winHeight = $(document).height();
            // 鼠标点击位置坐标
            var mouseX = e.pageX;
            var mouseY = e.pageY;
            // ul标签的宽高
            var menuWidth = $(".contextmenu").width();
            var menuHeight = $(".contextmenu").height();
            // 最小边缘margin(具体窗口边缘最小的距离)
            var minEdgeMargin = 10;
            // 以下判断用于检测ul标签出现的地方是否超出窗口范围
            // 第一种情况：右下角超出窗口
            if(mouseX + menuWidth + minEdgeMargin >= winWidth &&
                mouseY + menuHeight + minEdgeMargin >= winHeight) {
                menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
                menuTop = mouseY - menuHeight - minEdgeMargin + "px";
            }
            // 第二种情况：右边超出窗口
            else if(mouseX + menuWidth + minEdgeMargin >= winWidth) {
                menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
                menuTop = mouseY + minEdgeMargin + "px";
            }
            // 第三种情况：下边超出窗口
            else if(mouseY + menuHeight + minEdgeMargin >= winHeight) {
                menuLeft = mouseX + minEdgeMargin + "px";
                menuTop = mouseY - menuHeight - minEdgeMargin + "px";
            }
            // 其他情况：未超出窗口
            else {
                menuLeft = mouseX + minEdgeMargin + "px";
                menuTop = mouseY + minEdgeMargin + "px";
            };
            // ul菜单出现
            $(".contextmenu").css({
                "left": menuLeft,
                "top": menuTop
            }).show();
            // 阻止浏览器默认的右键菜单事件
            return false;
        });
        // 点击之后，右键菜单隐藏
        $(document).click(function() {
            $(".contextmenu").hide();
        });
    });
</script>