跨浏览器的网页右键菜单的简单实现

最新推荐文章于 2021-07-10 08:00:00 发布

coder-qi

最新推荐文章于 2021-07-10 08:00:00 发布

阅读量2.1k

点赞数 1

分类专栏： javascript web前端文章标签： js 右键菜单 contextmenu 鼠标事件

本文链接：https://blog.csdn.net/ricciozhang/article/details/42609527

版权

javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

web前端

5 篇文章 0 订阅

订阅专栏

本文主要叙述怎样实现右键菜单，以及跨浏览器的右键菜单的实现。

一般在网页页面按下鼠标右键（这个是在windows平台下，而在MAC中则是CTRL+点击），会显示默认的菜单，要显示自定义的右键菜单，则需要取消默认的浏览器行为，显示自定义的菜单。我们先来看一个事件：contextmenu事件，即上下文菜单事件，在windows95首先引入了上下文菜单的概念。不久这个概念逐步被引入web领域，通过这个事件可以解决取消默认菜单的显示，从而显示自定义的菜单，这个事件是冒泡的，即可以通过document来处理这个事件。所谓事件冒泡，就是事件会从事件发生的位置逐步向上传播，有些浏览器可以传播到window，有些只能传播到document。支持这个事件的浏览器有ie，firefox，safari，chrome，opera10+，为了处理不支持这个事件的浏览器，给出如下的代码：

<!DOCTYPE html>
<html>
<head>
    <title>右键菜单例子</title>
</head>
<body>
	<p>点击鼠标右键或者CTRL+点击来查看右键菜单。</p>
	<ul id="menu" style="position:absolute;visibility:hidden;background-color:#ccc;">
		<li><a href="http://www.example.com">Menu 1</a></li>
		<li><a href="http://www.example.com">Menu 2</a></li>
		<li><a href="http://www.example.com">Menu 3</a></li>
	</ul>
    <script type="text/javascript">
		var $ = function(id){
			return document.getElementById(id);
		};
		//跨浏览器的添加事件的实现
		var addEvent = function(element, type, handler){ 
			if(element.addEventListener){
				element.addEventListener(type, handler, false);
			}else if(element.attachEvent){ //IE
				element.attachEvent("on"+type, handler);
			}else{ //DOM0
				element["on"+type] = handler;
			}
		};
		var preventDefault = function(event){
			if(event.preventDefault){
				event.preventDefault();
			}else{ //IE
				event.returnValue = false;
			}
		};
		var getTarget = function(event){
			return event.target
					|| event.srcElement; //兼容IE
		};
		var getButton = function(event){
			//是否实现了鼠标事件
			if(document.implementation.hasFeature("MouseEvents", "2.0")){ 
				return event.button;
			}
			switch(event.button){ //兼容IE
				case 0:
				case 1:
				case 3:
				case 5:
				case 7:
					return 0;
				case 2:
				case 6:
					return 2;
				case 4:
					return 1;

			}
		};
		var showMenu = function(menu){
			//设置菜单的位置
			var style = menu.style;
			style.left = event.clientX + "px";
			style.top = event.clientY + "px";
			style.visibility = "visible"; //显示菜单
		};

		addEvent(window, "load", function(){
			var menu = $("menu");
			
			//优先选择这个事件来实现右键菜单
			addEvent(document, "contextmenu", function(event){
				if(event){
					event = window.event; //兼容IE
				}

				//阻止默认浏览器的行为
				preventDefault(event);
				showMenu(menu);
			});

			addEvent(document, "mouseup", function(event){
				if(event){
					event = window.event; //兼容IE
				}

				//鼠标右键点击
				if(getButton(event) == "2"){
					showMenu(menu);
				}else if(getButton(event) == "0"
							&& event.ctrlKey){ //ctrl+点击
					showMenu(menu);
				}
			});
			
			//判断一个节点是否为另一个节点的子节点
			function isChild(child, parent){
				var p = child;
				while( (p = p.parentNode) &&
							p != document.body){
					if(p === parent){
						return true;
					}
				}
				return false;
			}
			addEvent(document, "click", function(event){
				if(event){
					event = window.event; //兼容IE
				}

				//如果点击的不是菜单，就隐藏菜单
				if(getTarget(event) !== menu && 
						!isChild(getTarget(event), menu)){
					menu.style.visibility = "hidden";
				}
			});
		});
    </script>
</body>
</html>