标签：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
