html中实现某区域内右键自定义菜单

本文详细介绍了如何使用HTML和JavaScript创建一个自定义的右键菜单,包括菜单的显示和隐藏逻辑,以及如何根据鼠标位置调整菜单位置,适用于网页开发初学者。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="GBK">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style type="text/css">
        #drawing
        {
            text-align: center;
            width: 500px;
            height: 500px;
            border: 1px solid blue;
            margin: 0 auto;
            overflow: auto;
            display: block;
        }
        body, div, ul, li
        {
            margin: 0;
            padding: 0;
        }
        
        body
        {
            font: 12px/1.5 \5fae\8f6f\96c5\9ed1;
        }
        
        ul
        {
            list-style-type: none;
        }
        
        #menu ul
        {
            position: absolute;
            float: left;
            border: 1px solid #979797;
            background: #f1f1f1;
            padding: 2px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .6);
            width: 230px;
            overflow: hidden;
        }
        
        #menu ul li
        {
            float: left;
            clear: both;
            height: 24px;
            cursor: pointer;
            line-height: 24px;
            white-space: nowrap;
            padding: 0 30px;
            width: 100%;
            display: inline-block;
        }
        
        #menu ul li:hover
        {
            background: #E6EDF6;
            border: 1px solid #B4D2F6;
        }
        
        .skin
        {
            width: 100px;
            padding: 2px;
            visibility: hidden;
            position: absolute;
        }
    </style>
    <script type="text/javascript" src="http://api.51ditu.com/js/ajax.js"></script>
    <script type="text/javascript">
        //-->右键自定义菜单
        window.onload = function () {
            var drawing = document.getElementById('drawing');
            var menu = document.getElementById('menu');

            /*显示菜单*/
            function showMenu() {

                var evt = window.event || arguments[0];

                /*获取当前鼠标右键按下后的位置,据此定义菜单显示的位置*/
                var rightedge = drawing.clientWidth - evt.clientX;
                var bottomedge = drawing.clientHeight - evt.clientY;
                /*如果从鼠标位置到容器右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度*/
                if (rightedge < menu.offsetWidth)
                    menu.style.left = drawing.scrollLeft + evt.clientX - menu.offsetWidth + "px";
                else
                /*否则,就定位菜单的左坐标为当前鼠标位置*/
                    menu.style.left = drawing.scrollLeft + evt.clientX + "px";

                /*如果从鼠标位置到容器下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度*/
                if (bottomedge < menu.offsetHeight)
                    menu.style.top = drawing.scrollTop + evt.clientY - menu.offsetHeight + "px";
                else
                /*否则,就定位菜单的上坐标为当前鼠标位置*/
                    menu.style.top = drawing.scrollTop + evt.clientY + "px";

                /*设置菜单可见*/
                menu.style.visibility = "visible";
                LTEvent.addListener(menu, "contextmenu", LTEvent.cancelBubble);
            }
            /*隐藏菜单*/
            function hideMenu() {
                menu.style.visibility = 'hidden';
            }
            LTEvent.addListener(drawing, "contextmenu", LTEvent.cancelBubble);
            LTEvent.addListener(drawing, "contextmenu", showMenu);
            LTEvent.addListener(document, "click", hideMenu);
        }
    </script>
</head>
<body>
    <div id="drawing">
    </div>
    <!--自定义右键菜单-->
    <div id="menu" class="skin">
        <ul>
            <li><strong>HTML 学习</strong></li>
            <li>HTML 元素</li>
            <li>HTML 属性</li>
            <li>HTML 标题</li>
            <li>HTML 段落</li>
            <li>HTML 图像</li>
            <li>HTML 表格</li>
            <li>HTML 列表</li>
            <li>HTML 布局</li>
            <li>表单</li>
        </ul>
    </div>
</body>
</html>

  

转载于:https://www.cnblogs.com/lgx5/p/11102439.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值