您的位置：首页 > Web前端 > JavaScript

js自定义鼠标右键菜单

2017-03-15 10:25 344 查看

我们在浏览器上点击右键会出现一些经常见的菜单，下面我将介绍如何自定义自己的菜单。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0035)http://fgm.cc/learn/lesson5/06.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>自定义右键菜单</title>
<style type="text/css">
body,ul,li{margin:0;padding:0;}
body{font:12px/24px arial;}
#menu{position:absolute;top:-9999px;left:-9999px;width:100px;border-radius:3px;list-style-type:none;border:1px solid #8f8f8f;padding:2px;background:#fff;}
#menu li{position:relative;height:24px;padding-left:24px;background:#eaead7;vertical-align:top;}
#menu li a{display:block;color:#333;background:#fff;padding-left:5px;text-decoration:none;}
#menu li.active{background:#999;}
#menu li.active a{color:#fff;background:#8f8f8f;}
#menu li em{position:absolute;top:0;left:0;width:24px;height:24px;background:url(img/ico.png) no-repeat;}
#menu li em.cur{background-position:0 0;}
#menu li em.copy{background-position:0 -24px;}
#menu li em.paste{background-position:0 -48px;}
</style>
<script type="text/javascript">
window.onload = function(){
var ul = document.getElementById("menu"); //获取ul节点对象
/*为document绑定鼠标右键菜单事件*/
document.oncontextmenu = function(e){
var _event = window.event||e;  //事件对象
var x  = _event.clientX; // 鼠标的x坐标
var y =  _event.clientY; //鼠标的y坐标

ul.style.left = x + "px";  //改变ul的坐标
ul.style.top = y  + "px";
//阻止默认行为
if(_event.preventDefault){
_event.preventDefault();  //标准格式
}else{
_event.returnValue = false; //IE格式
}
}
}
</script>
</head>
<body>
<center>自定义右键菜单，请在页面点击右键查看效果。</center>
<ul id="menu" style="display: block; top: 54px; left: 645px;">
<li class=""><em class="cut"></em><a href="javascript:;">剪切</a></li>
<li class=""><em class="copy"></em><a href="javascript:;">复制</a></li>
<li class=""><em class="paste"></em><a href="javascript:;">粘贴</a></li>
</ul>

</body></html>

最重要的是要取消浏览器默认行为，注意兼容问题。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 鼠标右键自定义鼠标右键菜单

相关文章推荐

新的分享

章节导航