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

墨蓝 2022-05-29 00:15 209阅读 0赞

废话不多说，直接上代码，如下。

<!doctype html>
    <html lang="zh-CN">
    <head>
        <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">
    </head>
    <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>
    
    <script src="http://api.51ditu.com/js/ajax.js"></script>
    
    <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">
    //-->右键自定义菜单
    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>

其中有些多余的样式，没用仔细整理，见谅。附效果图：![format_png][]

**一个从装环境开始的学习记录公众号，欢迎大家关注：**

![20200618140202867.jpg][]

[format_png]: /images/20220529/e454c04bb8ad4ecaa93cb3bdb1977083.png
[20200618140202867.jpg]: /images/20220529/6c8be102d27a4bf597181960cd8c9860.png