码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-01-11 13:36:07      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:js   右键菜单   contextmenu   鼠标事件   

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

    一般在网页页面按下鼠标右键(这个是在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>


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

标签:js   右键菜单   contextmenu   鼠标事件   

原文地址:http://blog.csdn.net/ricciozhang/article/details/42609527

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!