js自定义右击鼠标菜单

js自定义右击鼠标菜单

前言

前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。 HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。

操作步骤：

1.创建菜单样式CSS

<style>
			#rightMenu
			{
				list-style: none;
				background: #AEF0F2;
				border: solid 1px darkgrey;
				margin: 0px;
				padding: 0px;
				position: absolute;
				left: 0px;
				top: 0px;
				right: 0px;
				display: none;
			}
			#rightMenu li
			{
				border-bottom: solid 1px darkgrey;
			}
</style>

2.创建一个html属性并添加菜单按钮

	<ul id="rightMenu" style="width:70px;">
			<li><button onclick="menu1()">划线操作</button></li>
			<li><button onclick="menu2()">标记操作</button></li>
			<li><button onclick="menu3()">取消操作</button></li>
	</ul>

3.重写浏览器默认鼠标右击函数

var rm=document.getElementById("rightMenu");	
	//自定义一个浏览器右键菜单，单击右键是显示它
	//oncontextmenu上下文菜单事件，右键菜单
	document.documentElement.oncontextmenu=function (e) {
	//显示我们自己定义的右键菜单
	//1.找到菜单
	//提取到函数外面作为全局变量
	//兼容Event对象
	e=e || window.event;
	//2.设置菜单的位置等于鼠标的坐标
	//判断：如果鼠标的位置+菜单的宽度>网页的宽度，那么就改为右边定位
	//鼠标坐标
	var mx=e.clientX;
	var my=e.clientY;
	//菜单宽度
	var rmWidth=parseInt(rm.style.width);
	//网页的宽度(高度用同样的方法解决)
	var pageWidth=document.documentElement.clientWidth;
	//console.log(pageWidth);
	if((mx+rmWidth)<pageWidth)
	{
		rm.style.left=mx+"px";
		rm.style.top=my+"px";
	}
	else
	{
		rm.style.right=mx+"px";
		rm.style.top=my+"px";
	}
	//3.显示右键菜单
	rm.style.display="block";
	//阻止默认的右键菜单显示
	return false;
	};

4.实现对应菜单按钮的方法

//菜单函数
	function menu1()
	{
	//菜单一按钮
	}
	function menu2()
	{
	//菜单二按钮
	}
	function menu3()
	{
	//菜单三按钮
	}