您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

javascript事件篇-鼠标右键菜单的自定义

发布时间：2016-12-31 15:33:42编辑：雪饮阅读（）

 自定义浏览器中的鼠标右键菜单:

<style>
ul{
position:absolute;
width:200px;
height:100px;
background:red;
display:none;
}
</style>
<textarea id="wb"></textarea>
<ul id="menu">
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
<script type="text/javascript">
var box=document.getElementById("wb");
var menu=document.getElementById("menu");
//添加文本区域右击菜单
box.addEventListener("contextmenu",function(evt){
evt.preventDefault();
menu.style.left=evt.clientX+'px';
menu.style.top=evt.clientY+'px';
menu.style.display="block";
},false);
document.addEventListener("click",function(){
menu.style.display='none';
},false);
</script>