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

最新推荐文章于 2024-06-01 10:00:35 发布

可乐Y

最新推荐文章于 2024-06-01 10:00:35 发布

阅读量1.2w

点赞数 7

分类专栏： html javascript 文章标签： html javascript

本文链接：https://blog.csdn.net/qq_37552993/article/details/79541664

版权

javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html

2 篇文章 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>

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

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

可乐Y

关注

7
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
html中实现某区域内右键自定义菜单

废话不多说，直接上代码，如下。&lt;!doctype html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta charset="GBK"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &amp
复制链接

扫一扫