js自定义右键菜单详解简单介绍

关于右键菜单大家一定不会陌生，比如我们可以再桌面或者网页点击右键，会弹出响应的右键菜单，选择不同的菜单项可以执行不同的操作，但是有时候这样的菜单并不能够满足需要，可能需要根据不同的操作场景来弹出不同的菜单，下面就介绍一下如何利用js实现自定义右键菜单的功能，代码实例如下:

[ bootstrap ] 运行代码下载代码

<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
body{
  font-size:12px;
  line-height:24px;
  font-family:Arial, Helvetica, sans-serif;
}
#activeArea{
  width:300px;
  height:200px;
  background:#06C;
  color:#fff;
}
#cstCM{
  width:120px;
  background:#eee;
  border:1px solid #ccc;
  position:absolute;
}
#cstCM ul{
  margin:0;
  padding:0;
}
#cstCM ul li{
  list-style:none;
  padding:0 10px;
  cursor:default;
}
#cstCM ul li:hover{
  background:#009;
  color:#fff;
}
.splitTop{border-bottom:1px solid #ccc;}
.splitBottom{border-top:1px solid #fff;}
</style>
<script type="text/javascript">
function customContextMenu(ev){
  var cstCM=document.getElementById('cstCM');
  cstCM.style.left=ev.clientX + 'px';
  cstCM.style.top=ev.clientY + 'px';
  cstCM.style.display='block';
  document.onmousedown=clearCustomCM;
  return false;
}
function clearCustomCM(){
  document.getElementById('cstCM').style.display = 'none';
  document.onmousedown=null;
}
window.onload=function(){
  var activeArea=document.getElementById("activeArea");
  activeArea.oncontextmenu=function(ev){
    var ev=window.event||ev;
    customContextMenu(ev);
    return false;
  }
}
</script>
</head>
<body>
<div id="cstCM" style="display:none;">
  <ul>
    <li>div css教程</li>
    <li>jquery教程</li>
    <li>javascript教程</li>
    <li>正则表达式</li>
    <li>特效代码</li>
    <li>51前端</li>
  </ul>
</div>
<div id="activeArea">51前端</div>
</body>
</html>

代码描述：js自定义右键菜单详解。js自定义右键菜单详解简单介绍

下载全部收藏

151 201

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册