easyui学习记录2-鼠标右键单击出菜单项

最新推荐文章于 2020-06-25 22:23:08 发布

张张打怪兽

最新推荐文章于 2020-06-25 22:23:08 发布

阅读量272

点赞数

分类专栏： easyui

本文链接：https://blog.csdn.net/qq_38188047/article/details/102984645

版权

easyui 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="../jq/jquery.min.js"></script>
    <script src="../jq/jquery.easyui.min.js"></script>
    <link rel="stylesheet" href="../themes/default/easyui.css" />
    <link rel="stylesheet" href="../themes/icon.css" />
    <script src="../jq/easyui-lang-zh_CN.js"></script>
</head>

<body>
    <!--复制。。。-->
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div>New</div>
        <div>
            <span>Open</span>
            <div style="width:150px;">
                <div><b>Word</b></div>
                <div>Excel</div>
                <div>PowerPoint</div>
            </div>
        </div>
        <div icon="icon-save">Save</div>
        <div class="menu-sep"></div>
        <div>Exit</div>
    </div>

    <script>
        $(() => {
            //oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
            //注意这里直接选document不要带''
            $(document).bind('contextmenu',e => {//bind绑定一个或多个 ， 多个每个事件写在{事件1},{事件2}
                $('#mm').menu('show',{//show:显示块
                    left:e.pageX,//pageX距离body的左距离
                    top:e.pageY
                });
                return false;
            });
        });
    </script>
</body>

</html>